Jquery tabs conflicting with revolution slider - javascript

I am trying to create a page containing revolution slider and a tabs script.
You can find the page here: http://lovebomb.nl/dating
But somehow the scripts are conflicting with one another.
This part of the revolution slider:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
Seems to be conflicting with this part of the tabs script:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
These scripts are combined in one JS file which can be found here: http://lovebomb.nl/dating/tabs.js
I used this site as a base for the tabs script: http://www.snelgeldonlineverdienen.nl/
The only difference is the jquery and the jquery UI version.
If I use the version of jquery of this page, the revolution slider does not work anymore.
I am already trying to fix the tabs for about 4 hours.
Really could use some help.
Thanks in advance :)
Luuk

At the beginning of tabs.js we have the declaration:
var tpj=jQuery;
tpj.noConflict();
this sets the variable tpj to the jQuery object, and then puts jQuery into noConflict():
"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict()."
Now that jQuery is in no conflict mode you can no longer use the $ to access jQuery. So when we run the code at the bottom of tabs.js:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
We get the error
"Uncaught TypeError: Property '$' of object [object Object] is not a function"
because $ no longer references jQuery. To access jQuery we must use jQuery or tpj
if we alter the tabs.js changing $ to either jQuery or tpj
tpj(document).ready(function(){
tpj('#tabs div').hide();
tpj('#tabs div:first').show();
tpj('#tabs ul li:first').addClass('active');
tpj('#tabs ul li a').click(function(){
tpj('#tabs ul li').removeClass('active');
tpj(this).parent().addClass('active');
var currentTab = tpj(this).attr('href');
tpj('#tabs div').hide();
tpj(currentTab).show();
return false;
});
});
the code should execute correctly.

Use Latest jQuery library Version( 1.7.1 +) and Try to modify above code to following and combine both to single file in init.js and place at bottom of all *.js files included in a page.
jQuery(document).ready(function() {
if (jQuery.fn.cssOriginal!=undefined)
jQuery.fn.css = jQuery.fn.cssOriginal;
jQuery('.fullwidthbanner').revolution({
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
jQuery(document).ready(function(){
jQuery('#tabs div').hide();
jQuery('#tabs div:first').show();
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li a').click(function(){
jQuery('#tabs ul li').removeClass('active');
jQuery(this).parent().addClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#tabs div').hide();
jQuery(currentTab).show();
return false;
});
});

Came across this issue while getting a canned html/css/js landing page template to work on Meteor. In my case removing the jquery-1.11.1.min.js and jquery-1.11.1.min.map files from the solution fixed the problem because I already have the latest version installed as a package. Hope this helps a solution searcher in the future.

Related

Slidedown() not working with display:none

I have the following code for sliding down my submenus,
$('#nav-menu > ul#nav > li').hover(function(){
var $this = $(this);
$this.siblings('li').find('.subnav-hover').stop().slideUp(200 , function(){
$this.children('.subnav-hover').stop().slideDown();
});
}, function(){
$(this).children('.subnav-hover').stop().slideUp();
});
I use the above code for multiple sites and it works absolutely fine, but on the following site --> link here, it does't quite work smoothly.
If you hover over the tab "Deficiency" , multiple times , you will see that the 2nd or 3rd time the submenu ul does't come into full view , because the height is not calculated correctly. In earlier sites i noticed slideDown() had issues with the property transition or when a fixed height was given, but in this case i am unable to locate the problem , and i am not sure why my slidedown() is not working.

fullPage.js scrollBar: true making the browser move with deelay

I use fullPage js script for my website. I have a problem.
I have some jquery that is changing my header elements when the visitor scrolls
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");}
});
Basically this is the jquery that is changing my header.
All was working good till I had to make my website sectioned with fullpagejs. This script is hiding my scroll bar and if the scroll bar isnt visible, my jquery from above isnt starting because he doesn t know that the visitor is scrolling or because the scroll bar isnt visible.
In fullPagejs I can show the scrollbar so my header elements will show with :
scrollBar: true
If I add this line of code the scrollbar is visible and my jquery starts working.
The problem is that if I make the scroll bar visible, my website is going between sections with some lag (like framing). Any ideeas how I can solve this problem or If it s a posibility to hide the scroll bar but to be able to change my header on scroll ?
You can check the website without scrollbar here: http://bit.ly/1AGcZvd
And with scrollbar here: http://bit.ly/1C6VH8m
The one with scrollbar have some lag, deelay, I don t know how to name it ..
Cheers!
You don't need to use scroll bar to make it work.
If you are using scrollBar:false, then you should be using the callbacks provided by fullpage.js such as afterLoad which get executed after you reach a section.
You could even use the CSS class added by fullPage.js to the body element of the page on section change. And deal just with CSS for all it... which would be faster.
But if you still prefering to show the scrollBar and to deal with jQuery instaed of with CSS, then take into account that your code is being executed hundreds of times on every scroll and that's what causing the lag... you should better optimize it...
Something like this, which checks for a flag, would optimize it a lot:
var hasChanged = false;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 1 && !hasChanged) {
$("header").addClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-negative.png')
$("#menu li a:first").removeClass("active")
$("#menu li").addClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search-negative.png')
$(".search input").addClass("search-negative");
} else {
$("header").removeClass("tab-2-header")
$(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-positive.png')
$("#menu li a:first").addClass("active")
$("#menu li").removeClass("negative-dotts")
$(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search.png')
$(".search input").removeClass("search-negative");
hasChanged = true;
}else{
//whatever
//...
hasChanged = false;
}
});
And if you still want to improve it more, you could just use Javascript instead of jQuery.
But personally I would just deal with CSS.

How can I make this responsive menu work on window resize for desktop?

I'm using the code below to add some classes to a WordPress menu in order for it to work on mobile. The only problem is the preventDefault, which disables the default click action for menu items with submenus and instead go to the next level, runs and when you're viewing the desktop site, top level menu items aren't clickable. How can I alter the code so on window resize, the javascript runs for mobile but on a larger window (e.g. larger than 768px), the code doesn't run and the preventDefault is ignored?
$(document).ready(function() {
// Adding 'has-submenu' class to first level for mobile
$('.menu > ul > li > ul.sub-menu').closest('li').addClass('has-submenu');
// JS media query for disabling and enabling top level click
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
});
Here is a jsfiddle. Notice how on responsive, clicking a parent menu item expands the menu. This functions the way I'd like. However, when you blow it out to the larger desktop version, notice that the preventDefault is disallowing you to click a parent menu item. I'd like these to be clickable on the larger desktop version.
http://jsfiddle.net/2U8Md/

I want to have a simple jquery slider for my plugin

I am using appendTo and prependTo function but what happens if there are two sliders on same page the content of second slider gets appended to first slider as i m takin class and classes are same for both the sliders . I can generate dynamic ids for both sliders ..but i m finding it difficult to get those ids in javascript .. Heres my demos
My Gallery Demo
This will show u my div structure and also javascript code ...
$('.imageslider > img.arrow.left').click(function(e) {
e.preventDefault;
var rotator = $(this).parents("div").find('.images');
//alert("asdasd");
rotator
.children('.imageHolder.' + navigation)
.last()
.prependTo(rotator)
.removeAttr("style")
.css("margin-left", "0px")
.animate({marginLeft: "0px"});
});
I think you can use two slider in span and then assign class to span
eg for slider 1
.class1 .slider{}
for slider 2
.class2 .slider{}
it might work

show/hide() changing block level element's width/behaviour?

I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :(
I've searched and searched for answers and tried out too many approaches and not getting anywhere... :( I bet I'm missing something very obvious or simple, hoping someone might be able to help...
ok - the problem:
I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand.
Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden.
That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'(
Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour.
Everything is working as intended for the showing and hiding of my menu - BUT....
The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred.
However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?!
I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something....
I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here....
the website: webeyedea.info
here's my JS code, following the link to jQuery:
// check for window size size on page load and show relevant content only
$(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
if ($(window).width() > 420) {
$('#toggle-nav').hide();
$('nav ul').show();
}
else {
$('#toggle-nav').show();
$('nav ul').hide();
}
});
// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow', function() {
// Animation complete.
});
$('ul').addClass('view');
});
UPDATE: SEE JSFIDDLE
When you call .show() on an element it sets the display property to the previous value and if it does not exist I believe it takes the default browser value which may be inline in your case. Try setting it explicitly to block.
I'm not sure what is doing what here since I don't have a mobile to test it, but could you try to replace your hide/show with a css function that toggle between display:none and display:block ?
Like this :
$('#toggle-nav').css('display','none');
$('#toggle-nav').css('display','block');
ALMOST ! NOT SOLVED
one solution, thanks to Vlad Radulescu (on Forrst) ~ via this jsfiddle fork
$('a#toggle-nav').css('display','none');
// Show the menu if Window width is less than 420
$(window).resize(function() {
if ( $(window).width() > 420 ) {
$('#toggle-nav').css('display','none');
$('nav ul').show();
}
else {
$('#toggle-nav').css('display','block');
$('nav ul').hide();
}
});
// Slide the Menu on smaller screens
$('nav #toggle-nav').click(function() {
$('nav ul').slideToggle('slow');
});
See my revised fiddle
http://jsfiddle.net/HWmp3/9/
I tested this on the iphone simulator and it works. My test was I copied the codes to a local file and tested. I put all the js inside of document.ready
make sure you have the meta in the header
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

Categories