I'm stuck since a long time so I'd like some help to solve my problem.
I have 2 pages. From the first page A, I have <a href> that link to an other page. Here is the link :
<div class="sucre" id="sucreFirst"><img src="_img/slide06.jpg" width="634" height="308" alt=""/></div>
On the other page B, I have a menu that hide and show content withe CSS class.
Here is the code for the menu :
<div id="menu_G">
<p>Le mariage de 2 expériences</p>
<p>Né d'une conviction</p>
<p>Des DRH militants</p>
</div>
As you can see, the page B is set to show the titre1 first.
<div class="ON" id="Titre1">content</div>
<div class="OFF" id="Titre2">content</div>
<div class="OFF" id="Titre3">content</div>
When I clic on the link from the page A i'll like it change property of the titre3 class to ON.
To resume, when I clic on the link from page A I'd like it show the titre3 content of page B.
I've tried many things but it always link to titre1.
Thanks for reading,
Alfred
Well, you have multiple ways to acheive your goal, so I'll give you an idea and a start point.
What you actually need to do is transferring information from the source page to the target page, the information transferred will be the element to turn ON and the elements to turn OFF.
One of the simple ways to send data between pages is by a URL Query String. You can create the Query String by simply adding it to the link.
Modify your link to:
href="ecole2.html?on=1&firstOFF=2&secondOFF=3"
The part from the ? is the query string, its structure is:
?key=value&key=value&key=value...&key=value
Now, when entering ecole2.html with this link, you'll be able to get those 3 variables (on, firstOFF and secondOFF) by a query string parser (you have many ways to do it).
Create a function which will get the parameters and will set the visibility upon them, something like:
function setVisibility(onElement, firstOffElement, secondOffElement)
{
document.getElementById(onElement).className='ON';
document.getElementById(firstOffElement).className='ON';
document.getElementById(secondOffElement).className='ON';
}
Call this function with each parameter when the page loads (onload event) and you're done.
<body onload="setVisibility(on, firstOff, secondOff)">
when on for example will be the string "Titre"+onParsedVariableFromQueryString
Here is a jsdiffle with a parsing URL function and actual parsing of three variables defined in the same way explained above. As the question is not directly about URL parsing, I see no need posting the actual parsing method code here.
With the above logic and examples I'm sure you can progress by your own.
Related
I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.
In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>
If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.
I have 2 html pages, movies.html and single.html.
In movies.html i have added list of movies, clicking on any movie will take us to single to html along with movie link. I have pasted the code below for better understanding.
<a href="single.html?movieLink=https://drive.google.com/u/0/uc?export=download&confirm=6KcH&id=1oezcBrXr8b-ATkIGD1I9ZQakPP9VX_5W">
Assume the movieLink given redirect to single.html and will start downloading the movie directly.
For getting the link in next page i have written a java script code.
But what I want is that I want to redirect the page to single.html, there I have given 2 options 720px and 1080px. After clicking on the resolution needed it should start to download the specific file.
which means I have to pass 2 href links from the movie.html page, how can i do that?
So your URL will be
single.html?param1=linkone¶m2=linktwo
and then you can use these two as functions to get the two parameters.
var param1 = getParameterByName('param1'); //return linkone
var param2 = getParameterByName('param2'); //return linktwo
Not sure if this can be done but I'm trying to redirect a url to a certain div. To give you more details of what I want to achieve is I have 1 page with 2 tabs and different url, I replaced that page with just 1 page and instead of 2 tabs I have the content just under each other. I few 3rd party websites link to these tabs so instead of sending the new url to them I was wondering if I can use those url's in the divs and when the user goes to the urls it redirect straight to that div.
In html you can do this
Div 1
<div id="div1">Loremipsum........</div>
and i want to do this
Div 1
<div id="div1 & http://www.gogle.com/div1">Loremipsum........</div>
Can it be done? I cannot find any documentation or examples.
Thanks
Hmmm I dont see your problem...
When you go to a page like www.example.com/index.foo#something (note the #something in the end - stackoverflow is reformating when i want to write it bold beacuse of the #) you will actually to the jump where the id "something" is placed. Try it out:
https://jsfiddle.net/8btkp706/
Something
<div id="something">
Soooooooooooo down below....
</a>
This may have been answered elsewhere but I couldn't find a question which fit my circumstances.
I have a site page which out puts in DIVs records from a database, this the same DIV looped. In this DIV I have a button which brings up a modal box. This modal DIV however is not coded within the looped DIV.
I need the modal box to be able to get the ID of the record for the data which the looped DIV is showing.
The button is:
<a href = "javascript:void(0)"onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div>
</a>
I assume I'll need to use java script somehow, but I don't know how to use it in this manner.
Ideally using some sort of form $_POST would be easiest with the form button having the set value of the $row->ID, but I can't make a form button also a can I?
Sorry for the possibly silly question, as I've said I've found similar things asked, but always find it hard to understand the full workings on other peoples scenarios as opposed to my own.
All help appreciated -Tom
I think the key to your answer is understanding how JS (and jQuery) uses this. When a function is called, the caller is almost always passed as the this variable. For example:
<button data-id="1234" onclick="runThisFunction()" value="run" />
<script>
function runThisFunction() {
//Do Stuff
var data_id = this.data('id');
};
</script>
In the above code, this contains the button that was clicked on. You can get lots of information from the this variable. In jQuery, you can even get to siblings, parents, or children in the DOM.
Here is an example solution to your question:
http://jsfiddle.net/yr6ds/1/
Here is a more elegant solution:
http://jsfiddle.net/yr6ds/2/
As it's recommended, Javascript must be kept in a physically separate file (to be unobtrusive). So how do I access a particular element in particular page? should I detect those elements by id? that would mean 2 elements can't have the same id even if they are not located in the same page.
Well, for instance, using the Html helpers methods generates element's name + id from the model's properties. If I use the same model in several pages, many elements will have the same id. How can I target them in different pages. By the way, CSS work the same way.
EDIT
Let's say I've this
<% = Html.TextBoxFor(x => x.FirstName)%>
It will generates
<input type = "Text" name = "FirstName" id = "FirstName"/>
Let's say I've this textbox in 2 differen pages. If want, for instance, to disable the textbox located in page A, how do I do it knowing they are two of them in 2 different pages. How do I discriminate them from my external javascript file?
Thanks for helping
I suggest that for each page the uses the same model, you create a wrapper div
<div class="pageA">
// the model stuff here
<% = Html.TextBoxFor(x => x.FirstName)%>
</div>
<div class="pageB">
// the model stuff here
<% = Html.TextBoxFor(x => x.FirstName)%>
</div>
and then use Jquery selectors to get the correct element $(".pageA input[name='FirstName']") (not sure if this syntax is correct).
You cannot have multiple elements on the page with the same id. That isn't valid HTML.
So when you use the same HTML helper multiple times, you need to pass different names:
<%: Html.TextBox("Foo", Model.Foo) %>
<%: Html.TextBox("Bar", Model.Bar) %>
Correct me if i'm wrong, but are you saying, you have some elements with the same id, on multiple pages, that you want to attach different behaviour to? If so then this could help you out. if not, then what Craig said.
You can use more specific selectors, or give your selectors context
have a look at the documentations here: http://api.jquery.com/jQuery/
under this header:
jQuery( selector, [ context ] )
it explains a bit about selects and context. you should be able to use this and some creative page building to target the right element with your jQuery.
So you have two files, each with a text field with the id "FirstName". When you're script runs on Page A you want to disable the field, but not when your script runs on Page B.
Is the structure of the two pages identical? I suspect not if you're handling these fields differently. Use the context to your advantage. Like if the one on Page A is in a div with id "thisDiv" and the other is in a div with id "thatDiv" you could document.getElementById('thisDiv'). If you get an element then disable the field, if not do nothing.
If you want a more specific answer you're going to have to give us more context.
Well JavaScript may be kept in a separate file or not, but it is definitely included as part of the HTML send to the browser for a particular page. I Hope I've understood your question, but, generally if you have you JavaScript code in a file, lets say utils.js then in your html generated should include (probably within the <head> tag):
<script type="text/javascript" src="/path/to/utils.js"></script>
The script get included in the page, and when the browser encounters this, it loads and then runs the script, for that page. Therefore, it is not important what the ids for elements on different pages are.
Does that make sense, or have I completely misunderstood your question?
Update:
Ok, so based on your comments, I think I understand. You have
//Page 1
//When loaded, this input should flash blue via javascript for example
<input id="firstName" .../>
And
//Page 2
//When loaded, this input has some other fancy effect/behaviour
<input id="firstName" .../>
Well in this case, as far as I see, there are only 2 types of answers. Have two seperate external js files, one per page and this way you can change to your hearts content ...OR... have some sort of hidden field in your page that tells your script what page it is looking at (this seems hacky)
<input type="hidden" value="page1"/> //etc..