I'm working with 2 divs, the first div should fill the whole screen (width & height) and once there is a button or link clicked in it, it should enable the scroll besides take to the second div.
I have been able to set something like this https://codepen.io/malditojavi/project/editor/ZgWYrZ/#0 But I'm unable to change the class of the with my own class 'allowscrolling' that would re-enable that scroll.
I used this function
allowScrolling() {
document.getElementByTagName("body").className = "allowscrolling";
}
Also tried via jquery, with:
<script>
$("button").click(function(){
$("body").css("overflow","scroll");
});
</script>
But both won't enable scroll after I click the first link. Anything I'm missing?
There is no getElementByTagName that returns a single element. There is a getElementsByTagName that returns an array. Use that and get the first element of the arrray to set the class
document.getElementsByTagName('body')[0].className = 'allowscrolling';
document.getElementsByTagName('body')[0].className += ' allowscrolling';
This will do, you can't use jQuery if you don't load it in your project.
Related
I've got an FAQ page I'm building. Next to the question, there is a plus sign to expand the content. On click, I've added the class active, but there are many questions, and I don't want to repeat the same jQuery snippet for each question. I've figured out how to find the parent ID but I'm having trouble storing it in an variable to reuse in the jQuery script.
What I want to be able to do:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$('element .expand').toggleClass('active')
})
Is there a way to do this? I get undefined when I do this:
$('.expand').click(function(){
console.log(element)
});
You can use the find() function to locate children of a selected element:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$("#" + element).find('.expand').toggleClass('active')
});
However, looking at your code, it seems like you just want to toggle the "active" class of the clicked element. If that is the case, you can do this much more simply without a variable at all:
$('.expand').click(function(){
$(this).toggleClass('active')
});
I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)
here is my code and fiddle
$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');
$("a.bx-next").click(function(){
$(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});
$("a.bx-prev").click(function(){
$(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});
Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :
$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');
etc... Problem is it only works for he first click on the button, as
$(".bxslider-inner:nth-child(4n+1)").next()
Will always be the same element. You now need to find a way to fetch the right elements on your click function.
Some elements here : In bxslider i want to add a class on current slide
They seem to be on the same level of the DOM tree, so you would use:
$(this).next().click();
Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.
I'm trying to scroll multiple div at the same time. when i scroll in one div, i would like to report the scroll in all div.
I create the div dynamically. So i use the function document.getElementsByClassName sub-category-container to get all my elements. And i try to get the current scroll of the current div to defer the value.
I can not get it to work through the class names.
Do you have a solution?
Here is an example of what I try to do :
JSFiddle
As you are using jQuery already Use class selector. Try this:
var subCatContainer = $(".sub-category-container");
subCatContainer.scroll(function() {
subCatContainer.scrollLeft($(this).scrollLeft());
});
DEMO
Based on your JSFiddle,
$(".sub-category-container").scroll(function() {
for(var i in subCatContainer)
$(subCatContainer[i]).scrollLeft($(this).scrollLeft());
});
JSFiddle