Take a look at https://www.simple.com website. See the way menu (& submenu) works when you scroll the webpage.
Does anyone know what it's called or know how it works? I'm trying to find a example or plug that can do this.
Thanks...
It is called fixed navigation bar and here is a great tutorial
http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/
It is very simple using jquery scroll() event handler.
You can bind it using following code
$(window).scroll(function () {
//your code goes here
}
read more at http://api.jquery.com/scroll/
It's just a simple anchor tag they've used along with some jQuery. A quick example here for you.
Create your links as normal Blog. This creates an anchor to move to your blog section.
Add a class to your element so it's now like: Blog
Next, add the jQuery code below to your page.
Don't forget to include the jQuery library..
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I have decided to delete the question as there's no answer to what I'm looking for and there's no need to leave behind an unanswered post 2 years from now.
Related
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
I'm trying to add a very basic little jQuery script to a WordPress site which adds the fa-invert Font Awesome class to an icon on event mouseenter and then removes the class on mouseleave.
Here is my little script:
//Jquery Script to invert colour of icons on hover
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
I've added this script to my function.php file as follows and it appears to be running fine when I load the page:
//include IconHover.js script
wp_enqueue_script('IconHover', get_bloginfo('template_url').'/js/IconHover.js', array('jquery'));
Now I've added the id of IconHover to my fa-twitter-square icon in the footer of the page but it doesn't seem to be inverting the colours on mouseenter.
Does anyone have any thought on why this may be? I've been looking at as many resources and examples of people doing similar things and I think that I am implementing the little bit of jQuery correctly within WordPress.
The site can be viewed here: http://dariusdevas.com/wp/?page_id=2
Any thoughts are greatly appreciated! :-D
its fa-inverse
that is it, following is working code
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-inverse");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-inverse");
});
});
There are two errors in your code one is due to deprecation, the other is a typo.
This is what it looks like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
This is what it should look like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
});
Also other than your bit of supplied code in your jquery there is a line of code that is deprecated this is:
event.returnValue
This needs to be changed to:
event.preventDefault
I'm working on a project based on one of the Codrops blueprints: http://l3s11023.zeus03.de/test/
I want to have the first submenu 'Lovely Spirits' already open when the page loads. I tried to do this with jQuery $( document ).ready(function() and a trigger event but without success.
Any help would be greatly appreciated. thanks.
Here is a fiddle with a part of your code and an example how you could trigger the click in
$(document).ready(function(){});
Make sure you include jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(document).ready(function(){
$('.cbp-hsmenu').children('li').children('a').on('click',function(){
$(this).next('ul').css('display','block');
});
/* HERE IS the interesting part*/
/* Trigger click on that function opening your sub-nav */
$('#gesu').trigger('click');
});
http://jsfiddle.net/Zms3T/
(Your question is not good. Next time please try to show only that part of code which is needed)
UPDATE THE ANSWER AFTER LOTS of trying on your site
The Code above was just an example of how you could try it. I was sure you trigger the function to open that navigation. However, replace the document ready with this: That will do what you where looking for.
$(document).ready(function(){
var elemHeight = $('.cbp-hsmenu li:first-child ul').height()
$('.cbp-hsmenubg').css('height', elemHeight+'px');
$('.cbp-hsmenu li:first-child').addClass('cbp-hsitem-open');
});
I am working on a site and would like the header to slide into the page from the top after the rest of the page has loaded.
Can anyone help with this?
Thanks
site is at choptlogic.com/atmananda
pw 123
As Chris Moutray suggests in his comment to your question, an ideal solution would be to use jQuery and one of its animations, e.g.,:
$(function() {
// When document is ready show the header using slideDown
// See http://api.jquery.com/slideDown/
$("#myHeader").slideDown(1000, function() {
// Animation complete callback
});
});
To illustrate, I just made a simple example of how to accomplish such effect using jQuery and the slideDown animation - the example is placed at this jsFiddle: http://jsfiddle.net/WAQLz/
References: http://api.jquery.com/slideDown/
I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/