So here's my html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<a id="x" href="#" style="position:fixed; top:0; right:10px;">Switch</a>
<div id="a">
<p>Huge paragraph 1</p>
</div>
<div id="b" style="display:none;">
<p>Huge paragraph 2</p>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$('#x').click(function() {
$('#a').toggle();
$('#b').toggle();
return false;
});
</script>
</body>
</html>
The problem is that let's say I've scrolled midway thru paragraph 1, and then hit the switch link. So now I'm looking at paragraph 2. Let's say I do some scrolling on paragraph 2, then decide I want to switch back to paragraph 1, so I hit switch. Problem is that when I switch back to paragraph 1, I'm in a completely different spot then my original midway point. How can I get each div's scrolling to basically only scroll their own respective content so that if I were to switch I can still continue where I left off previously?
The key is to store the scrollTop on the body element just before you toggle your elements.
Once you have stored that value, simply set it again each time.
Heres a quick and dirty implementation: http://jsbin.com/efijey/1/edit
Here was my question.
Update anchor tag as you scroll past an element in a div
And someone answered with this for the response which works perfect. You could make it so each spot on each div is saved and have it switch with the switch button.
http://jsbin.com/ezexaf/1/edit
Related
Ok so i have a problem i have simple html website filled with text and i want to make button which has an onclick function that makes my window(the position at the moment of the page) locate an element with id="element" and change the window position.like the ctr+F function but withouth highlighting the element
<head>
<script>
function h1Location(){
enter code here
}
</script>
</head>
<body>
<header >
<div style="position:fixed;">
<input type="button" onclick="h1Location()" />
</div>
</header>
<nav>
<h1 id="firstHeader" >TEXT</h1>
</nav>
</body>
So in this case i simply want to make the button locate and change PageView to 'TEXT'(h1 with id="firstHeader" so instead of scrolling up or down it immediately do it for you.
In page anchor links:
Click here to see some lower down part the author thinks is important.
<!--REST OF PAGE-->
<a name="placeToScroll">Here's that lower down part!</a>
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
I would like the content of a DIV to change when either of these conditions is met:
Clicking on a text link above the DIV
Hovering over the DIV itself
The DIV content should revert to its original state when the cursor is moved away from the div or the link.
My problem is this: The DIV content does not change back to the original after the link is clicked and the cursor is moved away. The onclick event seems to negate the onmouseout event.
If you have any suggestions, please post revised code to codepen; it would be greatly appreciated! Here is the code.
<html><head><title>Title</title>
<SCRIPT LANGUAGE="JavaScript">
function changeContent1()
{
document.getElementById("myDiv").innerHTML='<a href="#" onmouseout="changeContentBack1()" style="text-decoration:none"><div style="background:black;color:white;width:450px;height:203px">THIS TEXT APPEARS ON CLICK OR ROLLOVER</div>'
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function changeContentBack1()
{
document.getElementById("myDiv").innerHTML='<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT</div>'
}
</SCRIPT>
</head>
<body>
<div style="width:450px;float:left">This is the section title. <a href="#" onclick="changeContent1()">Click for more info<br><br>
<div id="myDiv"><a href="#" onmouseover="changeContent1()" style="text-decoration:none">
<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT
</div></a>
</div>
</div>
</body>
</html>
I added onmouseout="changeContentBack1()" to your link on your code pen and it works fine.
http://cdpn.io/ciHek
http://codepen.io/anon/pen/ciHek
On a side note you might want to clean up your HTML and validate it. I'm seeing a lot of missing or out of place tags.
I have a div element on a page that has other divs added to it when certain events happen. I do not know when these events happen, how they are triggered and how the other divs are added to the main div (its external so I have no idea whats happening all I have access to is the div).
How would I "monitor" for changes to the main div so an event is triggered whenever a new div is added ? I know I can use setInterval (which is what I'm doing now), but I really do not want to use it unless absoluley necessary. I would love to something as simple as form elements do with onchange but I have not found such for divs.
Example if text is not clear:
wesite.com/index.html ( the only thing I have access to)
<html>
<head></head>
<body>
<div id="theDiv">
</div>
</body>
</html>
and at times unknown to me divs get added to that div and it eventually looks like :
<html>
<head></head>
<body>
<div id="theDiv">
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
</div>
</body>
</html>
And lets say I set up the event to trigger an alert, in this example I want to see an alert box every time a new div is added so by the time it looks like this I should have seen 5 alert boxes.
Sorry if this is difficult to follow..
The easiest way is to intercept the calls that are adding the children to the DIVs. Is this not an option?
I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.
Here is the page:
<script type="text/javascript">
function display()
{
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
</script>
<!-- Start of content -->
<div id="div1" style="display:block">
<h2>This is shown at the beginning</h2>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p>
<a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
</div>
<div id="div2" style="display:none">
<h2>This is shown later</h2>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
</div>
If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.
So how can I get the browser to show the top of the div once it gets displayed.
window.scrollTo(x, y)
If you want to scroll the page to the top use
window.scrollTo(0, 0)
Otherwise, change the second parameter.
hide the div1 before displaying the div2.
If it does not run, use a scrollto javascript (based on displayed div) call to fix the issue
document.getElementById('div2').scrollTop=0