I made a little button show hide code for my homepage. If I put that code in internal pages it works fine but if I put it on homepage it doesn't work. If I put Jquery CDN in header so my revolution slider stops working.
Here's my homepage section where you can see the code:
http://www.mythstreet.com/#our-services
Here's my fiddle that is fine working:
http://jsfiddle.net/junaidkhawaja/ha6qp7w4/6/
Here's snippet of my code:
HTML
<div id="1">
My Content 1
</div>
<div id="2" style="display:none;">
My Dynamic Content
</div>
<div id="static" style="display:none;">
My Static Content
</div>
<button id="btnClick">Click me!</button>
<hr />
<div id="3">
My Content 1
</div>
<div id="4" style="display:none">
My Dynamic Content
</div>
<div id="static2" style="display:none;">
My Static Content
</div>
<button id="btnClick2">Click me!</button>
Javascript:
$( document ).ready(function() {
$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').html($('#static').html()).show().siblings('#1').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('#2').hide();
}
});
$('#btnClick2').on('click',function(){
if($('#3').css('display')!='none'){
$('#4').html($('#static2').html()).show().siblings('#3').hide();
}else if($('#4').css('display')!='none'){
$('#3').show().siblings('#4').hide();
}
});
});
Update: I found that after putting this code, my sliders is not working as well.
Just looking at your site and playing around in console, I can see that $ isn't defined.
A quick fix for this would be changing your code to use jQuery() instead of $(...)
Note: Can't currently debug this further as you've fixed the code on your live site (hooray!)
Looking at the code, at the very first line you miss the $
This one:
$( document ).ready(function()
Should be:
jQuery( document ).ready(function($)
Related
I am confused. This exact CSS works on other sites and same browser.
But on a certain website. The drop down does not work?
Is there a Heading Setter or something? Website setting? Its confusing me.
<button onclick="javascript:showElement('bshd')" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
I get that this showElement fucntion is custom made by you? You can achieve the same thing by using jquery show() function:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button onclick="$('#bshd').show()" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
I am using featherlight lightweight jQuery lightbox plugin but I don't understand how to load lightbox using with click event as I am not good with jQuery codes.
Here is my code work:
HTML:
Load Lightbox
<button id="openbox">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
<h2>Delete Item</h2>
<div class="row">
<div class="twelve columns">
<strong>Are you Sure?</strong>
<br>blubblub?
</div>
</div>
<div class="right"> Close
Yes
</div>
</div>
jQuery:
jQuery(document).on("click", "#openbox", function() {
jQuery('.lightbox').featherlight();
});
JSFiddle: jsfiddle.net/g68bZ/18/
Comment Reply:
But what If I want to display lightbox with logical condition like:
var checkedCount = $('.chkAssets:checked').length; // Getting some counts
if(checkedCount == 1){
// Load lightbox if condition is match
}
I hoping someone guide me proper way.
Thanks.
$.featherlight('#fl1');
Pay attention that the lightbox has id "fl1"
here is the fiddle
http://jsfiddle.net/g68bZ/26/
and here with if else example
http://jsfiddle.net/g68bZ/27/
I'm using PJAX for a project.
I have a container called #icerikAlani to load its content with PJAX.
Here is the basic layout:
<div class="container" id="icerikAlani" data-pjax-container>
<!-- NIVO SLIDER -->
<div class="row">
<div class="col-md-8">
<div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
</div>
</div>
<!-- SCROLLING LOGOS -->
<div class="row">
<div class="col-md-12">
<div id="logoParade"> SCROLLING LOGOS HERE... </div>
</div>
</div>
</div>
This container has two other script tags in it which are for Nivo Slider and Smooth Div Scroller plugins.
The problem is, when I navigate to a page and return to homepage, script tags stop working.
I tried to solve this problem by using pjax:end statement but I couldn't make it work, then I tried pjax:success as below bu still no luck. (as I read here: Where to put the page-initialize javascript when using pjax?)
Is there a way for using these scripts without reloading the page?
This is the script about PJAX and Smooth Div Scroller script:
<script type="text/javascript">
$(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
//THIS IS HOW I ACTIVATE PJAX
$(document).on('pjax:beforeSend', function() {
$('#icerikAlani').fadeOut(50);
});
//WORKS...
$(document).on('pjax:end', function() {
$('#icerikAlani').fadeIn(400);
});
//WORKS...
$(document).on('ready pjax:success', function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
//FAILS...
});
</script>
You can check the full code here
Because I'm not experienced about javascript, this problem stands like a wall against me before finishing the project. Hope to find something works both with the slider and the scroller.
Possibly your script causes an error.
Try Firefox and Firebug and see if you find something...
I am developing a page in JSP. It has 3 components: Header, Content and Footer. I want that when this page loads the Content part should be fade in to default content i.e. the Home Page, which contains button for register, login and site credits. When user clicks register button, the content in Content part should fade out and vanish and then content of register form should fade in and get displayed. Same for other buttons, but there should not be any change in header and footer. Please help!!!
With use of jQuery... You have working example there...
I'd recommend using a JavaScript library to achieve this.
jQuery has built in fading abilities.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Using JQuery, you can hide a div by using a selector and the hide() method. For example:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function swap_divs() {
$("#div_to_hide").hide();
$("#div_to_show").show();
}
</script>
<body>
<div id="div_to_hide">
Some text for div to hide
</div>
<div id="div_to_show" style="display: none;">
Some text for div to show
</div>
<button onClick="swap_divs();">Click me</button>
</body>
</html>
If you look at the JQuery website you can find more example and extensive documentation. Also for fading in/fading out.