I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
Related
I have used a Slick Slider on my page. Now, everything works fine, but I have to make the particular div triggered on a specific button press. It is like if I have div-2, and I have a button named as button-2 somewhere in the section, on click of it, the slick slider should change it to the div 2, making it active with the right active slick dots.
I have researched about it and got to know that sliderGoTo will do my job. But I don't know why it is not working fine. I have tried my level best, but somehow the button doesn't trigger the right div at all.
What I have tried so far (in pseudo form):
$(document).ready(function() {
$('.box').slick({
dots: true,
arrows: false
});
$('#trigger-button').click(function() {
slideIndex = $(this).index();
$('.slideshow').slickGoTo(parseInt(slideIndex));
)
}
});
/*$('#trigger-button').click(function() {
var slider = $('.box');
slider[1].slickGoTo(parseInt(actIndex));
})*/
//Alternatively used
<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
<div class='div-1'>
Some content
</div>
<div class='div-2'>
Some content
</div>
</div>
I have tried this also, since I want the specific div to be triggered that is div-2, to be triggered when we press the button with the id trigger-button. Can be found as the comment.
But no results. I don't have much experience with usage of SLICK SLIDER, but I have tried. I would be glad to learn more about it. Thanks
EDITS
Thank You guys for helping me out. I have found one solution for me, and that too in an easier way. If you want to go to a specific pos, you have to use this syntax and your work is done :
$('.box').slick('slickGoTo', divNo). Remember divNo = currentPos - 1.
Nowadays, the slickGoTo doesn't work like the previous syntax which is .slickGoTo(parseInt(slideIndex));. It will give you an error which is Undefined slickGoTo method. Proper usage is depicted in my code. Thanks again, and I'm sure this will help people in future references.
Try using $('.box').slick('slickGoTo', parseInt(slideIndex), false); instead.
On a side note: I'm not sure using .index() will always work as intended.
Check https://github.com/kenwheeler/slick for more details.
You have some error in your code.How you can get the index of element is depends upon your elements on HTML
But currently you have to div so you can set index as 1 and increment/reset onclick of button.
Replace
$('#trigger-button').click(function() {
slideIndex = $(this).index();
$('.slideshow').slickGoTo(parseInt(slideIndex));
)
}
To
var indexVal=1; $("#trigger-button").click(function(e){
e.preventDefault();
// slideIndex = $(this).index();
$( '.box' ).slickGoTo(indexVal);
indexVal=indexVal+1;
if(indexVal>2){
indexVal=1;
} });
Here is a working snippet for you:
$(document).ready(function() {
$(".box").slick({
dots: true,
arrows: false
});
});
var indexVal=1;
$("#trigger-button").click(function(e){
e.preventDefault();
// slideIndex = $(this).index();
$( '.box' ).slickGoTo(indexVal);
indexVal=indexVal+1;
if(indexVal>2){
indexVal=1;
}
});
/*$('#trigger-button').click(function() {
var slider = $('.box');
slider[1].slickGoTo(parseInt(actIndex));
})*/
//Alternatively used
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"/></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css"/>
<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
<div class='div-1'>
Some content1
</div>
<div class='div-2'>
Some content2
</div>
</div>
I am using a bit of jquery to hide some content on my webpage until a button is clicked. The jquery is hiding my content just fine but no matter how many times I click the button, it wont show back up again and I cant figure out what I have done wrong! Here is my code:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
Instead of show() use toggle() method. Please check the code below:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
I have a news page which (for the sake of length) uses a Show/Hide script for long contents.
Thing is that the script is applied globally to all the contents and I would like it to be applied to only one element or to the nearest element.
Script:
$(document).ready(function(){
$(".btn1").click(function(){
$("p.esl").hide();
});
$(".btn2").click(function(){
$("p.esl").show();
});
});
Website: http://thc-racing.com/
P.S. I'm new to jQuery so my skill are very limited.
This following code will fix your problem.
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
this code will not hide all the p tags which only hide belongs to news item
cheers
Use id not the class
$(document).ready(function(){
$("#btn1").click(function(){
$("p#esl1").hide();
});
$("#btn2").click(function(){
$("p#esl1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id = "esl1">Here is my paragraph!!!! Hi I can hide</p>
<p id = "esl2">Here is my paragraph!!!! Hi I won`t hide</p>
<button id = "btn1">hide</button>
<button id = "btn2">show</button>
May be this answer here, will help you understand more.
As #naveen said above is best way to deal with this kind of scenarios
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
in this logic traversing to its part and finding its own child will solve event click problem.
Hope you well,
I'm trying to make something like this,
firstly, it'll show this
and after, clicking this "menu" image, It'll show something like this
So, I've made some container using <div> here:
<body>
//this is my menu container..
<div class="menu_pos_jquery">
<a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
</div>
//here is my another container which i would like to open using Jquery after click menu container..
<div class="menu_pos_jquery2">
</div>
</body>
So i did tried using this code:
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeIn();
});
});
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeOut;
});
});
</script>
But it's not working, When i run this program, but it shows full page like what i provide you a second pic .. And i want to show only first menu and after click menu it must suppose to show my another container, how to do it? pls, help.. and sorry for my bad English!! .. hope you understand my question.
You should change your code into this:
$(document).ready(function(){
$(".menu_pos_jquery2").fadeOut();
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeToggle("slow");
});
});
Maybe you want this
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery").fadeOut("normal",function(){
$(".menu_pos_jquery2").fadeIn();
});
});
});
You have registered two click event handlers to the same element, so when ever you click the button, both will be called. But only one should be called at a time.
Adding and removing a class to the .btn element would be a good option, as you can also specify CSS w.r.t the state. Please consider the following
$(document).ready(function(){
$(".btn1").click(function(){
var isMenuOpen = $(this).hasClass("open");
if(isMenuOpen){
//if already open, close it
$(this).removeClass("open");
$(".menu_pos_jquery2").fadeOut();
}else {
//if not open, open it now
$(this).addClass("open");
$(".menu_pos_jquery2").fadeIn();
}
});
});
Returning to JavaScript after a long break and I can't get this to work. I must be doing thing really stupid because it works fine with an onclick('') attached to the button in the HTML file just not when I try and do it in the script.js
I've tried to include everything that should be needed but if i've missed something let me know.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script type="text/javascript" src="script.js"></script>
<div class="application">
<button type="button" class="solution" id="webSolution">
<p>
Website Solutions
</p>
</button>
<button type="button" class="solution" id="mobileSolution">
<p>
Mobile Solutions
</p>
</button>
</div>
<div class="mobileSolutionDetails">
<h3>
Mobile Solution
</h3>
price details
</div>
<div class="webSolutionDetails">
<h3>
Website Solution
</h3>
price details
</div>
and my javascript
$(document).ready(function() {
$('#webSolution').onclick(function() {
alert('webSolution');
$('.webSolutionDetails').style.display = 'block';
$('.mobileSolutionDetails').style.display = 'none';
});
$('#mobileSolution').onclick(function() {
alert('Hey!');
$('.mobileSolutionDetails').style.display = 'block';
$('.webSolutionDetails').style.display = 'none';
});
});
Any help would be great
It doesnt like onclick for one. Changed to:
.on("click", function(){});
instead of
.onclick(function(){})
if you wanted to do it your way, you would want to do
.click(function(){});
on a similar note, your CSS tags are wrong for jquery.
use:
$(item).css({display:"block"}); //instead
Here is a fiddle. http://jsfiddle.net/qMsm2/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Your script must come after jquery.min.js, otherwise $ won't be defined when you try to use it. You're also missing the end > in the jQuery script tag.
jquery uses "click" as function.
http://api.jquery.com/click/
You should use it like this:
$('#webSolution').click(function() {
});
Check this fiddle: http://jsfiddle.net/4CNML/
Two ways for you to write it.
With .on (this is becoming the most favored way it seems)
$('#mobileSolution').on('click', function() {
alert('Hey!');
$('.mobileSolutionDetails')..css({display: 'block'});
$('.webSolutionDetails').css({display: 'none'});
});
or with .click
$('#mobileSolution').click(function() {
alert('Hey!');
$('.mobileSolutionDetails').css({display: 'none'});
$('.webSolutionDetails').css({display: 'none'});
});
Also, since your using jQuery the .style is invalid. Use .css like I did above.