Not sure if this is a bit of a tall order, but what I'm looking to achieve is to be able to scroll to the top of a specific page and toggle the div to show a hidden search form.
Below is what I have at the top of the page
<p>
<center>
<a href="javascript:toggle('filterresults')">
<div class="mobile-button">☰ Filter Results</div>
</a>
</center>
</p>
<div id="filterresults" style="display:none">SEARCH FORM HERE</div>
What I would like is as a user scrolls down the page a button fixed to the bottom appears allowing them to scroll back to the top and open the toggled div which is set to hide.
Is this possible? If so, any ideas how to implement it. Thank's for any advise offered.
UPDATE
Ok, this is what I've figured out so far which does what I want, this only thing I could do with is having the button fade in as the user scrolls down so far of the page
<script type="text/javascript">//<![CDATA[
var x = document.getElementById('filterresults');
function myFunction() {
if (x.style.display === 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
$("html, body").animate({ scrollTop: 0 }, "slow");
}
</script>
<button onclick="myFunction()">Toggle Results</button>
Related
I am having a problem with regards with showing DIV or section after redirecting to page, I am using magento custom page, so basically it is pure html.
Here's my code:
1st page:
1st page: 1st page
second page:
<div id="secondpage_1st-div">
<h2>second page</h2>
<p>hello</p>
</div>
<div id="secondpage_2nd-div">
<h2>second page</h2>
<p>hello</p>
</div>
I need to show the div when I click the link on the first page.
I'm using tab to show content of every div
Thank you
Add a javascript to hide the div with id 'secondpage_2nd-div' in second page!
<script>
element=document.getElementById("secondpage_2nd-div");
element.style.display = 'none'; // Hide
//element.style.display = 'block'; // Show
</script>
Else, there are many div in page, hide all the divs and show only one desired,
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
</script>
and then
<script>
element=document.getElementById("secondpage_1st-div");
element.style.display = 'block'; // show one div
</script
It totally depends on your requirement.
Hope it helps!
I have searched an searched for answer to this question but can't seem to find an answer that works for me. What I'm wanting is an image that presents itself on the page as with a normal tag. I want the image to be clickable, and when it is clicked, some content will drop down below it for a description of the image, etc. Then, when the image is clicked again, it will hide the content.
My (beginner) javascript attempt looks like this:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
$(window).load(function(){
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
The HTML is this:
<div class="container">
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
<div class="content" style="display: none;">
The words should be here.
</div>
Any help would be appreciated, and I apologize if this has been answered elsewhere. I couldn't find it.
You need a separate script tag for your code. You can't reuse the one that's importing jQuery.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
// Your code
</script>
Try this html:
<div class="container">
<div class="header"><img src="Placeholders/placeholder.jpg" width="500" height="333"></div>
<div class="content" style="height: 0px;overflow:hidden;">
The words should be here.
</div>
And this script:
$(document).ready(function(){
$(".header").click(function () {
if($(".content").height() === 0){
$(".content").animate({height: "20px"}, 500);
}else{
$(".content").animate({height: "0px"}, 500);
}
});
})
On jsfiddle: https://jsfiddle.net/wef1o0b5/
I'm trying to have a Div fade in after the user clicks two other divs.
This is what I have so far but I'm pretty sure I'm doing something wrong. I can't seem to get the div to fade in even if only one div is clicked let alone two. Any help would be appreciated! thank you so much.
<script>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(9000);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(18000);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(18000); });
</script>
<script type="text/javascript">
$(document).ready(function(){
$("video_overlaysanswer").click(function() {
var index = $(this).closest("li").index();
$("video_overlaysanswer1").eq(index).fadeIn("slow");
return false; // prevents navigation to #
});
})
</script>
<div id="video_overlays">
This is where text is
</div>
<div id="video_overlaysanswer">
answer 1
</div>
<div id="video_overlaysanswer2">
answer 2
</div>
<div id="video_overlaysanswer1">
the answer that I want to fade in once the other two div's are clicked
</div>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(500);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(500);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(500);
$("#video_overlaysanswer,#video_overlaysanswer2").click(function() {
$("#video_overlaysanswer1").fadeIn("slow");
return false; // prevents navigation to #
});
});
Try code above.It works fine.Now implement different click event fo buttons.hope this helps.
http://jsfiddle.net/szr9vpv5/
I am loading data on page and using infinite scroll to load more data as the user scrolls (default 20 items on page load. But depending on the screen resolution like 1080 the page loads and the vertical scroll bar is not visible or active for the user to scroll. I added a button for the user to click to load more and as they scroll that load button will hide.
Problem: on page load if a vertical scroll is active or visible how can i hide the button from the start rather then having to scroll the first time for it to hide. Also how can i keep the load button visible until a vertical bar is active.
div/button:
<div id="loadUsers" class="btn" data-bind="click: Next" style="position:fixed; width:auto; height:20px; padding:5px; bottom:10px; ">
Load more users...
</div>
knockout Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage(_page);
};
hide load button once scrolling is enabled
$(document).ready(function () {
$('#main').scroll(function () {
$('#loadUsers').hide()
var div = $(this);
if (div[0].scrollHeight - div.scrollTop() == div.height()) {
Next();
}
});
});
visible binding:-
<div id="loadUsers" class="btn" data-bind="click: Next, visible: displayBtn()" style="display:none; ">
Load more users...
</div>
Script:-
self.displayBtn= function(){
return ($(document).height() < window.innerHeight);
}
With this function you can know if the vertical scrollbar is active :
var isVBActive = function(){
return ($(document).height() > window.innerHeight);
}
And with the resize event can hide or show the button :
$(window).resize(function() {
if(isVBActive())
$('#button').hide();
else
$('#button').show();
});
I hope it helps.
I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).
The one caveat is that clicking anywhere except on the flyout itself will also close it.
So far, I have it working almost, but not 100%. If you click on the actual 'body' element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn't take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).
javascript:
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$(document).on('click',function(e) {
if ( $(e.target).parents($flyout).length === 0 ) {
$flyout.fadeOut(flyoutDuration);
}
});
HTML
<body>
<div class="blackbar">
<div class="container clearfix">
<div class="icon logo"></div>
<div class="flyout">
<h3>
Welcome back, username
</h3>
<div class="menu">
<ul>
<li><div class="users"></div>Users</li>
<li><div class="groups"></div>Groups</li>
<li><div class="configuration"></div>Configuration</li>
<li><div class="logout"></div>Logout</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<! -- content here -->
</div>
</body>
The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)
To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$('.flyout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('click',function(e) {
if(flyout-open) {
$flyout.fadeOut(flyoutDuration);
}
});
Jquery Menu Click - on click anywhere on body will close the menu
In my case i wanted to close a drop down menu if its clicked primary link or outside the link i.e. anywhere on the html/body
http://jsfiddle.net/austinnoronha/k2Lwj/
var toggleClick = function(){
var divObj = $(this).next();
var nstyle = divObj.css("display");
if(nstyle == "none"){
divObj.slideDown(false,function(){
$("html").bind("click",function(){
divObj.slideUp();
$("html").unbind("click");
});
});
}
};
$(".clickme").click(toggleClick);