The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Link to a page, focus and display text
Jomathr
post May 1 2012, 04:25 PM
Post #1





Group: Members
Posts: 5
Joined: 1-May 12
Member No.: 17,021



Good day to all of you,

I am trying to link to another page, move that freshly loaded page to a specified position and display some hidden text from a link. I have been looking for something like this for a few days now with no success.

I'll try to explain a bit better with code first:

here is what I have so far on the first page where the link is
CODE

<li><img src="http://gatesinnovation.com/GATES/Images/icon1.gif"><p>Quel antivirus choisir?</p><a href="Conseils.html#conseil1" onload="document.getElementById('Conseil1').style.display = ''" <b>Plus</b></a></li>


It does part of what I want to do, it does send me to the other page and focus on the part intented, but as the text is hidden by default it is not showing and I can't display a default one since it might not always be the same text that is displayed.

The last part of this line of code is not working, from "onload" and forward.

here is the part in the target page that controls the text view/hide depending on what I click on that page:
CODE

<li><a href="#conseil1" onclick="document.getElementById('Conseil1').style.display = '';
                                    document.getElementById('Conseil2').style.display = 'none';
                                    document.getElementById('Conseil3').style.display = 'none';
                                    document.getElementById('Conseil4').style.display = 'none'";>Quel antivirus choisir?</a></li>
                                <li><a href="#Conseil2" onclick="document.getElementById('Conseil1').style.display = 'none';
                                    document.getElementById('Conseil2').style.display = '';
                                    document.getElementById('Conseil3').style.display = 'none';
                                    document.getElementById('Conseil4').style.display = 'none'">La copie de sauvegarde?</a></li>
                                <li><a href="#Conseil3" onclick="document.getElementById('Conseil1').style.display = 'none';
                                    document.getElementById('Conseil2').style.display = 'none';
                                    document.getElementById('Conseil3').style.display = '';
                                    document.getElementById('Conseil4').style.display = 'none'">Quel est l'utilité de...</a></li>                                
                                <li><a href="#">Support au bureau</a></li>


Anyone can help me with this? here are the 2 pages
Page with links Gates Innovation - first page
and here is the target page Gates Innovation - Target page

Thank you in advance

Jomathr
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 1 2012, 04:36 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,620
Joined: 9-August 06
Member No.: 6



You can't use onload with a link. Even if you could it would refer to the current page, not the page the link is leading to.

Just thinking alloud here, but I think it would be possible to do by attaching a query string to the URL in the link. Then have a script on the next page read the query string and unhide different elements depending on what the query string is.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jomathr
post May 1 2012, 05:56 PM
Post #3





Group: Members
Posts: 5
Joined: 1-May 12
Member No.: 17,021



I tought so, but it is a good way to illustrate what I am trying to do.

I suppose you mean something like using php to pass a variable to a script on the target page and change the display/hide attribute of my html function? I haven't tought of that, I'll take a look around to see if I can find something in php or js to do something like that.

thanks for the hint
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 2 2012, 01:31 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,620
Joined: 9-August 06
Member No.: 6



Nuh, I meant plain JavaScript. Manually tag on a querystring to each URL in links that should unhide something, for example in this case<a href="Conseils.html#conseil1?unhide=conseil1">...</a>. Then you have a JavaScript snip run onload on the target page that grabs the value of 'unhide' in the query string and changes the display propery of conseil1.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 2 2012, 08:30 AM
Post #5


.
********

Group: WDG Moderators
Posts: 6,234
Joined: 10-August 06
Member No.: 7



You can use the existing hash (#) value with JS location.hash, then there should normally be no need for a querystring.

If you do use querystrings, PHP should be more reliable than JS.

Also the order of hash and querystring might matter, see e.g. http://www.webmasterworld.com/forum21/8405.htm




--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jomathr
post May 2 2012, 09:47 AM
Post #6





Group: Members
Posts: 5
Joined: 1-May 12
Member No.: 17,021



Good morning pandy and Christian,

Christian, I checked out what you posted, and the order for what I want to do doesn't seem to matter. The location.hash would help me to point to the right section of my code but it would not be able to trigger the "show" action without some JS code I assume, unless you know some html wiz mind trick to execute a specified line of html. I got to say I've been working with html/css/javascript and php for 3 weeks now and it is way different then software programming, my usual logic seem to not apply when it come to web programming.

Pandy, I looked into what you suggested and came up with something in javascript using the url to pass my variables

So in the link page I use ?ShowTips=Jcon1 at the end of my url to pass a variable depending on wich link is clicked

CODE

<article class="col-1">
                            <h2>Solutions</h2>
                            <ul class="solutions">
                                <li><img src="http://gatesinnovation.com/GATES/Images/icon1.gif"><p>Quel antivirus choisir?</p><a href="Conseils.html#conseil1?ShowTips=Jcon1" <b>Plus</b></a></li>
                                <li><img src="http://gatesinnovation.com/GATES/Images/icon2.gif"><p>Quel est l'utilité de...</p><a href="Conseils.html#conseil2?ShowTips=Jcon2"><b>Plus</b></a></li>
                                <li><img src="http://gatesinnovation.com/GATES/Images/icon3.gif"><p>Support ŕ distance?</p><a href="Conseils.html#conseil3?ShowTips=Jcon3"><b>Plus</b></a></li>
                                <li><img src="http://gatesinnovation.com/GATES/Images/icon4.gif"><p>Les copies de sauvegarde?</p><a href="Conseils.html#conseil4?ShowTips=Jcon4"><b>Plus</b></a></li>
                            </ul>
                        </article>


And in the target page I am using a parse function to retrieve the variable from the url and a switch to take action:

CODE

<script type="text/javascript">

var locate = window.location
document.varbox.Jvalue.value = locate

var text = document.varbox.Jvalue.value

function delineate(str)
{
    point = str.lastIndexOf("=");
    return(str.substring(point+1,str.length));
}
var ShowTips;
ShowTips = delineate(text);
alert(ShowTips);
switch (ShowTips)
{
    case Jcon1:
        alert("I'm in Jcon1");
        document.getElementById('Conseil1').style.display = '';
        break;
    
    case Jcon2:
    alert("I'm in Jcon2");
        document.getElementById('Conseil2').style.display = '';
        break;
        
    case Jcon3:
    alert("I'm in Jcon3");
        document.getElementById('Conseil3').style.display = '';
        break;
        
    case Jcon4:
    alert("I'm in Jcon4");
        document.getElementById('Conseil4').style.display = '';
        break;
    
    default:
        alert("default");
        ShowTips= "none";
}
alert("I'm out");
</SCRIPT>


So now I am able to get my variable and the first alert returns correctly "Jcon1" corresponding to the link I clicked but it seem to ignore the rest of the code as none of the following alerts are trigered, not even the last "I'm out" one.

Any chance you know why this is happening? any html/JS limitation or conflict that I don't know of that is causing this?

Thank you again for your time

This post has been edited by Jomathr: May 2 2012, 10:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 2 2012, 11:25 AM
Post #7


.
********

Group: WDG Moderators
Posts: 6,234
Joined: 10-August 06
Member No.: 7



QUOTE(Jomathr @ May 2 2012, 04:47 PM) *

Good morning pandy and Christian,

Good morning (or afternoon)!

QUOTE
The location.hash would help me to point to the right section of my code but it would not be able to trigger the "show" action without some JS code I assume, unless you know some html wiz mind trick to execute a specified line of html.

Seems you can actually use the CSS3 :target pseudo-class:

CODE
<style type="text/css">
div.hide {display: none;}

div.hide:target {
display: block;
border: solid green;
}
</style>

<div id="Conseil1" class="hide">Conseil1</div>
<div id="Conseil2" class="hide">Conseil2</div>

Some links for testing:
<a href="index.html">show none</a>
<a href="index.html#Conseil1">show Conseil1</a>
<a href="index.html#Conseil2">show Conseil2</a>

Unfortunately the above makes all DIVs stay hidden in older browsers (like IE8), so therefore I try to combine it with the CSS3 negation pseudo-class (assuming that browsers that support the latter also support the former) to instead make them stay open by default:

CODE
<style type="text/css">
div.hide:not(:target) {display: none;}

div.hide:target {
display: block;
border: solid green;
}
</style>


QUOTE

So now I am able to get my variable and the first alert returns correctly "Jcon1" corresponding to the link I clicked but it seem to ignore the rest of the code as none of the following alerts are trigered, not even the last "I'm out" one.

Any chance you know why this is happening? any html/JS limitation or conflict that I don't know of that is causing this?

IIRC I got some JS type error. Maybe you need to turn window.location into a string (with the toString() method) before using string functions on it. If you use location.search or location.hash such conversion doesn't seem necessary, though.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
script_monkey
post May 2 2012, 01:57 PM
Post #8


Newbie
*

Group: Members
Posts: 14
Joined: 2-May 12
Member No.: 17,029



You can use a <div> and AJAX script to pass variables by PHP and have the text appear on the same page without even having to go to another page. Somebody just asked a similar question about a function an the most common answer is to design your scripts in AJAX with PHP /SQL etc ..or do it the easy way download the webtoolkit and copy/paste their stuff
http://super-seo-man.com/Mods4Sale/web_developer_toolkit.php
i checked the page its still up so you should be good.
why reinvent the wheel if the scripts are already there and why waste your time or clients time designing from scratch what somebody else already did biggrin.gif That's my motto anyway lol
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jomathr
post May 2 2012, 08:56 PM
Post #9





Group: Members
Posts: 5
Joined: 1-May 12
Member No.: 17,021



I finaly got it to work thanks to the help of google and a guy named justsomeguy

here is what he said:

QUOTE
It seems like switch and if compare differently. With an if statement, this works:

if (ShowTips == 'Jcon1') alert('match');

The same isn't true with switch. With switch you need to compare against ShowTips.valueOf(), which is a string value representation of the String object. The reason that's necessary is because you cast the value as a new String. There's a disconnect in Javascript between string values and String objects, they aren't strictly the same thing.


The logic of the code was good, only that little detail that made it fail.

Here is the final code:

CODE

<script type="text/javascript">
function delineate(str)
{
  point = str.lastIndexOf("=");
  return(str.substring(point+1,str.length));
}
var ShowTips = delineate(window.location.href);
console.log(ShowTips);
function FuncShow(ShowTips)
{
  console.log("I'm in the function")
  console.log(ShowTips);
  if (ShowTips == 'Jcon1') console.log('match');
  switch(ShowTips)
  {
    case "Jcon1":
          console.log("I'm in Jcon1");
          document.getElementById('Conseil1').style.display = ''
          break;
    case "Jcon2":
          console.log("I'm in Jcon2");
          document.getElementById('Conseil3').style.display = ''
          break;
    case "Jcon3":
          console.log("I'm in Jcon3");
          document.getElementById('Conseil4').style.display = ''
          break;
    case "Jcon4":
          console.log("I'm in Jcon4");
          document.getElementById('Conseil2').style.display = ''
          break;
    default:
          console.log("I'm in Default")
          console.log("default");
          ShowTips= "none";
  }
}
console.log(ShowTips+"I'm out");
</SCRIPT>


thank you guys for the help =O)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 3 2012, 09:17 AM
Post #10


.
********

Group: WDG Moderators
Posts: 6,234
Joined: 10-August 06
Member No.: 7



The type error doesn't occur anymore, now that you use window.location.href (instead of window.location) and quote the case values in the Switch statement. That way there seems to be no need for valueOf (at least not in the browsers I tested with), and in fact you're not even using it in the code example. unsure.gif

There's no function call to the FuncShow() function.

Using style.display = '' does not seem to undo an existing CSS "display: none". Try using a value like style.display = 'block' instead.

If DIVs are hidden with CSS but require JS to be shown, it will not work for users without JS. It's more reliable to use JS both for hiding and showing.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd November 2014 - 08:20 AM