Codrops Horizontal Slide Out Menu - Show submenu on page load - javascript

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');
});

Related

Conflict window.size and some jquery

I have a problem I cant figure out. So hope someone can help me.
I have this code in the footer of an iframe:
<script type="text/javascript" src="https://sinsio.dk/iframe-resizer-master/js/iframeResizer.contentWindow.min.js" defer></script>
<script>
jQuery( ".sidebar a" ).click(function() {
window.parentIFrame.size(1250);
jQuery('.content').css('display', 'none');
});
</script>
I want to resize an iframe and hide some content when clicking a link in the sidebar.
Scenario 1 (working):
If I only have window.parentIFrame.size(1250) in the click function it resizes the iframe.
Scenario 2 (working):
If i add alert(jQuery(this).attr('class')); to the function it resizes and alert the class from the clicked element. Did this to test if jQuery worked - it did.
Scenario 3 (not working but needed):
If I instead of the alert add jQuery('.content').css('display', 'none'); it removes the content div as i want but the resize no longer works.
Any ideas what is wrong? Doesn't make sense to me.
Kind regards,
Michael
I had a conflict with a height attribute on the body element of the iframe. Removing this was the solution.
Thanks for taking the time to look at my post.
Kind regards,
Michael

Going to a page anchor after load adding transition

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()

Adjust menu bar buttons' highlighter when scrollling the webpage

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.

Unable to show the div on body load

This is my code posted in a jsfiddle Demo.
As you can see when you click on the
Hyderabad.
Visakhapatnam.
Then a Horizontal Image slider is shown ( YOu can slide throgh the Pictures )
Now my requirement is I need to also show the Image slider on body load itself also
I have tried using body onload function to show the div , and also in Jquery ready function , and by commenting all the hide() functions in javascript , but none of them really worked .
Could anybody please tell me what is the way to do this .
I just tested it.. first I thought that you should just do this:
jQuery(document).ready(function() {
$fp_galleries.first().click();
});
but poorly this will only show the first image and not all images.
I don't know why but it looks like you should do this.
$(window).load(function() {
/* your code */
$fp_galleries.first().click();
});
Maybe because you need to wait until the images are loaded.
perhaps use document on ready to call the function: http://api.jquery.com/ready/
$(document).ready(function() {
openGallery(galleryname){
})
;
The problem is not that it is hidden, its rather that the content are only generated by som javascript when the user clicks one of your links.
You could add something like
$("li",$fp_galleries).first().click()
at the bottom of your script.
This will trigger the click event on one of the links.

How to execute jQuery function after Ajax page load

I'm building Wordpress website where all content pages are loaded using Ajax. This is causing me a problem with jQuery localScroll plugin. This plugin will add animated scroll to all anchor links on the page. Problem is that using script below I'm able to have animation on that page only after one of the links on the page is clicked.
I think I understand why is this happening. My guess is that after I click on the main menu script will execute but since Ajax content is not yet loaded events are not attached to Ajax loaded content links. Now I'm stuck, I have no clue how to fix this. Would you mind helping me with this one?
Thank you in advance.
$(function(){
$('a').live('click', function() {
$('#portfolioWrap').localScroll({// Only the links inside that jquery object will be affected
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
EDIT
Just a note to others after I managed to make this work. I tried all suggestions here. My guess is that solutions suggested by o.v. and Ohgodwhy should work, but probably due to website complexity and maybe plugin limitations I wasn't able to make them work. For example .on function didn't work at all although I'm using jQuery 1.7.1. At the end I implemente ajaxComplete suggested by Just_Mad and that worked. Thank you all for your help!
This is the code:
$(function() {
$('#wrapperIn').ajaxComplete(function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
If you use jQuery.ajax to load AJAX content you can try to bind to ajaxComplete event, to get the moment, when any ajax is complete.
Elaborating on what GoldenNewby said, listen/attach with the .on() method introduced in jQuery 1.7.
$(function(){
$('body').on('click', 'a', function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
No need to use AJAX for callbacks for listening/binding to elements. The above function will place a click function on all elements found within the body{1} at/after page load. This includes all dynamically created links.
{1} - Change 'body' to whatever Container has the ajax data. I.E. #portfolioWrap
Add a callback to the ajax load, good place to start is at http://api.jquery.com/jQuery.ajax/ under "success callback"
I would have given more specific advice, but your snippet is a bit isolated, maybe if you created a jsfiddle?

Categories

Resources