I may be close but since apparently nobody asked something like this, perhaps I may ask with the wrong wording.
I have a tabber with categorys which are dynamic and fancy box-galleys which also have dynamic attributes (shown here as divs with the attribute lala="xyz"). So how can I show on click on the tabber (here as first and last buttons) only the matching gallerys (in my code the first two or the last two divs should diapear)?
NOTE: the attributes are not predictable.
My html:
<div class="wrap">
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 1</p>
</div>
<div class="box" lala="ui">
<p>This is my box. There are many like it, but this one is mine. 2</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 3</p>
</div>
<div class="box" lala="uibui">
<p>This is my box. There are many like it, but this one is mine. 4</p>
</div>
</div>
<div class="showall">Show all</div>
<br>
<div class="mybutton" lala="ui">SHOW ONLY UI</div>
<div class="mybutton" lala="uibui">SHOW ONLY UIBUI</div>
And my jquery:
jQuery(function ($) {
$('.showall').click(function() {
$('.box').show();
});
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not([myattr = "lala"]).hide();
});
});
Thanks in advance!
Inject your attribute into a attribute selector so that the end result looks like
not('[lala="uibui"]')
e.g.
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$(".box[lala]").not('[lala="' + myattr + '"]').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/
It can be simplified to just
$('.mybutton').click(function () {
var myattr = $(this).attr('lala');
$('.box:not([lala="' + myattr + '"])').hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tt1upb9o/2/
Or even down to this (but now less readable):
$('.mybutton').click(function () {
$('.box:not([lala="' + $(this).attr('lala') + '"])').hide();
});
Try this:
$(".box").not('[lala = "'+myattr+'"]').hide();
Related
Ok, I have made a simple accordion in jQuery. It looks like this:
example
It is super lightweight and working well but I want to add a #hash "reading" ability to it. So if I use a url mydomain.net/faq#acc2 it will open second bar and scroll to it. Can you help me please :)
<div id="faq">
<h4 id="acc1">Question1</h4>
<div>
<p>text text text text</p>
</div>
<h4 id="acc2">Question2</h4>
<div>
<p>text text text text</p>
</div>
<h4 id="acc3">Question3</h4>
<div>
<p>text text text text</p>
</div>
</div>
$(document).ready(function($) {
var allPanels = $('#faq > div').hide();
$('#faq > h4').click(function() {
$this = $(this);
$target = $this.next();
if(!$target.hasClass('active')){
allPanels.removeClass('active').slideUp(200);
$target.addClass('active').slideDown(200);
} else {
$target.removeClass('active').slideUp(200);
}
return false;
});
})(jQuery);
You can get the URL content by using
window.location.href
and set that to a variable. Then create an "if" statement to query the results against your arguments (the url condition you want given each case).
My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".
Here's the "nav" items.
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.
<p id="home1">Home text</p>
<p id="store1">Store text</p>
This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).
<script type="text/javascript">
$(".nav").click(function() {
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).css('display', 'block');
});
</script>
I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!
You are not adding # for the id selector:
$('#' + changeCSS)
Also consider the built-in jQuery effects .hide() and .show().
In your case it would be something like this:
$(".nav").click(function(){
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).show();
});
This way you can easily control the speed at which your div appears or disappears:
$(changeCSS).hide(1000); //takes a second
$('.nav').click(function(event){
var tag = $(event.target);
var id= '#' + tag.attr('id') + '1';
$(id).css('display','block')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
<p id="home1" style="display:none">this is the home paragraph</p>
<p id="store1" style="display:none">this is the store paragraph</p>
I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.
With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo
Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.
I have a menu where I'd like to retrieve the text within the div so I tried writing something like this
$(".link").click(function() {
var linkValue = $(".link").text();
alert(linkValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="link">Home</div>
<div class="link">Apartment</div>
<div class="link">Contact</div>
<div class="link">About us</div>
</div>
But it takes all the values of each class. Is it possible to make it take only the div's text I clicked?
Use this inside the click function:
$(".link").click(function(){
var linkValue = $(this).text();
alert(linkValue);
});
You can see in the headline what it is. I've four "div", and therein are each a p tag. When I go with the mouse on the first div, changes the "opacity" of the p tag of the first div. The problem is when I go on with the mouse on the second or third "div" only changes the tag "p" from the first "div". It should changes the their own "p" tags.
And it is important, that i cannot use CSS ":hover".
The problem is clear, it is that all have the same "id".
I need a javascript which does not individually enumerated all the different classes.
I' sorry for my english.
I hope you understand me.
My script:
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
Javascript:
function normal() {
var something = document.getElementById('something');
something.style.opacity = "0.5";
}
function hover() {
var something = document.getElementById('something');
something.style.opacity = "1";
CSS:
p {
opacity: 0.5;
color: red;
}
As Paul S. suggests, you need to pass this to the function so that it knows which element it has to work on.
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
And then select the child element <p> for the passed <div>. Here I select the first child p, i.e. the first element in the array of children of this element with tag p, that's why you see [0]. So if in each div you had two paragraph, then you could use e.g. getElementsByTagName("p")[1] to select the second <p>.
function normal(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="0.5";
}
function hover(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="1";
}
See the working example here: http://jsfiddle.net/mastazi/2REe5/
Your html should be something like this:
<div onmouseout="normal(1);" onmouseover="hover(1);">
<p id="something-1">LOLOL</p>
</div>
<div onmouseout="normal(2);" onmouseover="hover(2);">
<p id="something-2">LOLOL</p>
</div>
<div onmouseout="normal(3);" onmouseover="hover(3);">
<p id="something-3">LOLOL</p>
</div>
<div onmouseout="normal(4);" onmouseover="hover(4);">
<p id="something-4">LOLOL</p>
</div>
As you can see, we have different ids for your elements, and we pass the ids through the function that we trigger with onlouseover and onmouseout.
For your javascript, your code could be something like this:
function normal(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "0.5";
}
function hover(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "1";
}
For normal() and hover() we receive an id and change the style for the current element that have this id.
Please, check this JSFiddle that I've built for you.