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
Related
I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.
If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).
What I want to do is to show the content of a HTML page at the bottom right corner of a page through my js script like below
In order to accomplish this, I do not want to put a div in the page and then the page to be appeared in it, BUT with somehow to place it there alternatively.
The goal is to edit nothing from the page, all the magic must be done through the .js file.
So for now what I have is this :
<div id="topBar"> HOME </div>
<div id ="content"> </div>
<script>
function load_home()
{
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
</script>
but it loads the page where I place the div, not overlay.
How to do this?
If JQuery is ok with you, then you can have a look at the following options
http://www.erichynds.com/examples/jquery-notify/
http://notifyjs.com/ (This one has same effect like the one described in above image)
You can load the html page via AJAX and then render it into the DIVs created using any of the above plugin.
For cross domains, you may have to try out following approach
http://www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html
On one of my web pages, I have buttons at the top, say A, B and C.
Below it, I would like to display varying content in a common DIV. What is displayed is determined by which of the buttons is clicked. There is no order in which the buttons can or will be clicked.
Each of Contents A, B and C are php driven pages with menu options, forms, etc. The forms could be partly filled up after which User could navigate away from the page by clicking one of the above buttons and then clicking another button to come back to the form - I need to retain values of partially entered data.
Could someone share code (or point me in the right direction) where:
1) How do I ensure that Content A is displayed when page is initially loaded?
2) How do I define the page?
So far, I have defined a container DIV for the area where the content is to be displayed. And thereafter three DIVs where each of the three php pages are loaded.
My problem is that All 3 DIVs are displayed and I can scroll up and down to view them.
I can handle 2 DIVs but 3 DIVs challenge me.
Thank you in advance.
Uttam
Check out this awesome jquery plugin which will add some kind of parallax effect to your page.
fullpage.js
http://alvarotrigo.com/fullPage/#4thpage
The layout
<button class="toggleButton" data-target="div1">A</button>
<button class="toggleButton" data-target="div2">B</button>
<button class="toggleButton" data-target="div3">C</button>
<div id="div1" class="toggleDiv">
Content A
</div>
<div id="div2" class="toggleDiv" style="display:none">
Content B
</div>
<div id="div3" class="toggleDiv" style="display:none">
Content C
</div>
The JavaScript code:
$(function(){
$('.toggleButton').click(function(){
var target = $('#' + $(this).attr('data-target'));
$('.toggleDiv').not(target).hide();
target.show();
});
});
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
I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser.
How can I get work this with the fixed positioning?
Javascript to show/hide goes like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").show();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
HTML Goes like:
<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
▼</a></div>
<div class="slidingDiv">
<div id="stickyfooter">
<ul id="footer_menu">
<li class="imgmenu"></li>
<li>Intro</li>
<li>Photos</li>
</ul>
</div>
</div>
FYI: The position:fix; css applies to the STICKYFOOTER div
what if you hide the "stickyfooter" div, instead of the container?That way, the container will always be fixed (and shown), but when you hide the content, it will have nothing shown in it.
Can you try giving a duration parameter?
Like this:
$(".slidingDiv").slideToggle("slow");
Move position fixed from #stickyfooter to .slidingDiv if you can, or create a new element inside #stickyfooter that you'll hide/show.