I have the following html and I want to change the divs around onclick. For example:
Initial
<div class="box1">Story 1</div>
<div class="box2">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
When I click on Story 2, it becomes
<div class="box2">Story 1</div>
<div class="box1">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
So .. whichever div is clicked will take the property of box1 and the others will become box2. Is it possible?
One more possible solution with toggleClass() method:
$("div").on("click", function() {
$(this)
.siblings(".box1")
.andSelf()
.toggleClass("box1 box2");
});
DEMO: http://jsfiddle.net/x8vxh/
Something like this perhaps:
$('.box1, .box2').click(function() {
$('.box1').addClass('box2').removeClass('box1');
$(this).addClass('box1').removeClass('box2');
});
It might be neater to have one box class for all boxes, and one active class that you add and remove, and the latter class could override the properties of the former. Would save you the trouble of toggling two different classes.
Try this
$("div").on("click",function(){
$(".box1").prop("class","box2");
$(this).prop("class","box1");
});
http://jsbin.com/igugop/3/edit
Related
If I had HTML content like this:
<div id="my1">
<div id="1">This is div 1</div>
<div id="2">This is div 2</div>
<div id="3">This is div 3</div>
<div id="4">This is div 4</div>
<div id="5">This is div 5</div>
</div>
How can I append an HTML string returned from an XHR request that comes in like this:
<div class="cA cB cC" data-type"a">
<div>Success Message Here<div>
<div class="cL">Undo</div>
</div>
So the end result is:
<div id="my1">
<div id="1">This is div 1</div>
<div id="2">This is div 2</div>
<div id="3">This is div 3</div>
<div id="4">This is div 4</div>
<div id="5">This is div 5</div>
<div class="cA cB cC" data-type"a">
<div>Success Message Here<div>
<div class="cL">Undo</div>
</div>
</div>
The thing is, I don't want to do document.createElement(div).appendChild() since it already comes formatted with classes and data attributes.
Is there a way to simply add this HTML to where I need it?
You can append to the div's innerHTML. Assuming your content to add is stored in a variable called html:
document.getElementById('my1').innerHTML += html
First of all you have to make sure that data is safe to insert it directly to prevent XSS.
Then you can use method called insertAdjacentHTML:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
You can choose place to insert your raw HTML
element.insertAdjacentHTML('beforeend', rawHtml)
It seems like Electron won't allow selectors such as :first-child and :nth-child.
For example, for the following HTML:
<div class="tabs" id="first">Block 1</div>
<div class="tabs" id="second">Block 2</div>
<div class="tabs" id="third">Block 3</div>
And the following CSS:
.tabs:first-child {
display: none;
}
Electron would just not execute the CSS, therefore the first <div> would still appear.
How can I solve this?
Thanks!
you can wrap your divs inside a parent like this
<div>
<div class="tabs" id="first">Block 1</div>
<div class="tabs" id="second">Block 2</div>
<div class="tabs" id="third">Block 3</div>
</div>
now first-child will work.tested and working
i think reason is now first one is first child of it's parent
I tried to search for this topic with no luck.
I want to display content in my webpage in multiple rows and with each row, I want to have next and back buttons when the contents are more than the page width.
A good example is Youtube
I found good toturials about carousel, but I am not really looking for carousel or at least it doesn't look like what I am looking to implement.
I hope that I was able to explain my question
I did something quite similarly in the past, I will try explain how I did it.
Firstly, here is the js fiddle:
https://jsfiddle.net/VoidZA/fxudjony/
It is something around the lines of:
<div class="container-holder">
<div class="click-prev nav-button">Prev</div>
<div class="outsideViewBefore container">Container Before</div>
<div class="inView1 container">Container 1</div>
<div class="inView2 container">Container 2</div>
<div class="inView3 container">Container 3</div>
<div class="inView4 container">Container 4</div>
<div class="inView5 container">Container 5</div>
<div class="outsideViewAfter container">Container After</div>
<div class="click-next nav-button">Next</div>
</div>
edit final:
Fixed up the code, and put an example into jsFiddle
If I have a few divs like below, is it possible to remove or hide the divs that have images in them (I don't want to use something like nth-child in case another image is added in the future)
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"</div>
<div>Test 1</div>
<div>Test 1</div>
One of the great things about jQuery is it's set-based. So: You find the set of imgs directly contained by divs via $() with a child combinator selector div > img, then find each of those img's parent via parent, and remove them via remove:
$("div > img").parent().remove();
Example (with two divs with imgs, just to demonstrate that the above doesn't just handle a single one):
$("div > img").parent().remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to handle the img being anywhere within the div, not just as a child, just use a div img selector and closest:
$("div img").closest("div").remove();
Example:
$("div img").closest("div").remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<!-- Note the added span to demonstrate finding a non-child img -->
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$('div').each(function() { // for each div
var $this = $(this);
if($this.find('img').length) // if the div has images as descendants
$this.remove(); // remove it
});
Note: If you're looking for divs that has images as direct children then replace .find with .children.
Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');