How to make a top bar slide down by pulling a button? - javascript

I can't find a script or example of this... I'd like to have a little div on top of window, when you hover on it, a top horizontal bar slides down. I've made a schema :
thanks

Check the fiddle:
http://jsfiddle.net/EghgN/8/
You can add your menu contents to the structure.

Related

How to fix 'toggle between images in owl carousel the content moves to top'

I am working on the project, here is my live link to the site code My link
Here u will see the owl slider of the product. when I toggle between the images the images and the whole content is moved to the top of the page behind the fixed header.
what I want is that the screen remain still and do not move or scroll to top or bottom
You need to prevent the default behavior of the anchor tag that you're using. Maybe try using this:
$(".horizontal-thumb ").click(function(e) {
// change slider image
// do something else
e.preventDefault(); // this is what you need
})

Auto Scroll Down with Javascript

I would like you to help me make a Javascript code with autoscroll down in one particular div in one page, and while it scrolls down i want to make one procedure.
Im new in javascript but i know these things to help you out
<div class="uiScrollableAreaWrap scrollable" data-reactid=".c6.0">
This is the div of the box that is scrollable.
Could you give me an example of how can i make a javascript code
to take this class and scroll down until the end of the Wrap??
Update one.
http://screencast.com/t/8WNIFZB8rYG
Check out this photo to see all the divs of the box that i want to scroll down.
Relevant SO Link
Just for your case:
This will scroll down to bottom of the div
var objDiv = document.querySelector("._5tee .uiScrollableAreaWrap");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Update:
based on your screenshot, Assuming that you want to scroll the ul list to the bottom.
var ulList= document.querySelector("._5tee .uiScrollableAreaWrap");
ulList.scrollTop = ulList.scrollHeight;
In case you want it for other div, use this pattern
.uiScrollableAreaWrap.scrollable yourdivselector

Position of pinned nav [jquery.pin.js]

I'm looking for some help with the position of my nav. I'm using the jquery.pin.js script to make it sticked within a container. That works.
But I would like to attribute a top at 50% of the windows when scrolling on the container and not just a padding value. Something like that :
top:50%;margin-top:-40px;//half of nav height
A basic Fiddle here without top value : http://jsfiddle.net/vdqfvqh5/
An image of the nav behavior if it's helped : link (to dropbox)
Thanks a lot for helping !

how include multiple divs in one javascript toggle?

I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();

horizontal scroll on clicking button

I want to horizontally scroll a div by clicking on the button Left and Right but it is not working
$('#left').live('click' , function(){
$('#myDiv').scrollLeft(300)
})
$('#right').live('click' , function(){
$('#myDiv').scrollLeft(-300)
})
​
How can I scroll a div by a bytton click. I also want to remove the scroll bar
JS Fiddle
If you don't want to get rid of the scroll bars, why don't you just alter the CSS of the cropped content (i.e. its margin-left)?
Give the wrapping div a overflow:hidden and use the following JS:
$('#left').click(function(){
$('#myDiv').css('margin-left','-300px');
});
$('#right').click(function(){
$('#myDiv').css('margin-left','0');
});
Would look like this.
​
Is this what you want?
jsfiddle
i used css and margins for scroll, overflow hidden to hide the bar, float to align the pictures and changed some css...

Categories