I'm working on a new header for a website, and my header works perfectly on codepen. You can check it out at:
http://codepen.io/germangallo/pen/eNeKWG
As you may see, if you click on the menu button (categories) it slides a menu that I've done following the steps by callmenick here:
http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
However, when I've tried to make it work at my site, everything is great, but the slider menu doesn't work. I'm new at JavaScript, so I really don't know if the problem is there, and I can't figure out any way to fix the problem.
My site is: http://www.pensarpoker.com/nuevo
It looks like you script is executing before the dom element is accessible on the page, try adding your slider script to the bottom of the page or wrapping it in a $( document ).ready() if your using jQuery.
Related
I'm building this site julebord.bedriftsdesign.no and implemented animated scroll on this page: http://julebord.bedriftsdesign.no/julebord.html
Now this is the problem. When I use an internal anchor link like (#myanchor) the animated scroll works fine. But if the link is formatted like this http://julebord.bedriftsdesign.no/julebord.html#myanchor It won't work.
I need both to work but am a bit at a loss on how. I'm guessing something has to be changed in the javascript i use right?
Would appreciate any input on this. Thanks
I think it won't work with your current script because the scroll is triggered by a click not a page load.
You could detect the URL hash on the page load and then manually trigger the click, which would then trigger the scroll.
You could do something like (this isn't tested in your page so it might need some tweaking)
if(window.location.hash) {
$('a[href="#'+window.location.hash.substr(1)+'"]').trigger('click');
}
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox
I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.
I've just noticed that javascript elements aren't working correctly on the website. They are working, however, they only work on one page, and not site-wide.
http://www.radonsystems.net
Javascript elements, such as menu hovering, work on that page. Additionally, so does the jQuery fancybox [click on live chat].
No go to http://www.radonsystems.net/business/profile.2, notice that the menu hover and live chat fancybox doesn't work.
Any ideas?
Ok, looks like removing a script breaks it up. Have to split up the javascript in the header.