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
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)
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
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
I have got show|hide script. It work's good but I need to modify html of this script
http://jsfiddle.net/kolxoznik1/nRf5f/
like on my schema
<!--Links-->
<div>link1</div>
<div>link2</div>
<!--Hide divs-->
<div>Show1</div>
<div>Show2</div>
and my goal is that html look like this:
example html what I want to do
<div class="product_menu_categories">link_1</div>
<div class="product_menu_categories">link_2</div>
<div class="copy hide">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
<div class="copy hide">
<ul>
<li>test4</li>
</ul>
</div>
Are you saying that you want you page structure to be:
<!-- Top Level Menus/Categories -->
<div>Menu Item #1</div>
<div>Menu Item #2</div>
<!-- Submenu Items -->
<div id="submenu-of-menu-item-1">
<div>Item A</div>
<div>Item B</div>
</div>
<div id="submenu-of-menu-item-2">
<div>Item C</div>
</div>
but yet display the submenus under the correct menu item?
If so, change $("div.copy:eq("+i+")").toggle().siblings("div.copy").hide(); from you JSFiddle code to
$("div.copy:eq("+i+")").insertAfter(this).toggle();
$("div.copy:not(:eq("+i+"))").hide();
Basically what that does is move the submenu to the correct position on first click, and then hide the rest of the div.copy elements.
Here's your modified example on JSFiddle: http://jsfiddle.net/pjHu3/
How can I do this task automatically. I need to change source order of the divs, which has same id in above 100 pages.
I created an example:
This is default condition
<div class="identification"> <div class="number">Number 1</div> </div>
<div class="identification"> <div class="number">Number 2</div> </div>
<div class="identification"> <div class="number">Number 3</div> </div>
<div class="identification"> <div class="number">Number 4</div> </div>
<div class="identification"> <div class="number">Number 5</div> </div>
<div class="identification"> <div class="number">Number 6</div> </div>
<div class="identification"> <div class="number">Number 7</div> </div>
I need it like this
<div class="identification"> <div class="number">Number 1</div> </div>
<div class="identification"> <div class="number">Number 3</div> </div>
<div class="identification"> <div class="number">Number 2</div> </div>
<div class="identification"> <div class="number">Number 7</div> </div>
<div class="identification"> <div class="number">Number 4</div> </div>
<div class="identification"> <div class="number">Number 5</div> </div>
<div class="identification"> <div class="number">Number 6</div> </div>
Is the manual editing only option? I use Dreamweaver.
I have to do this change in HTML source permanently.
Edit: (it's just example)
The fix things are, total div are 7 and every container div has same class="identification"
Breathe deep and start manual editing. Take pauses of 5 minutes on every 10 minutes to avoid that you get freaked out. You'll finish in a hour or two. At least, in less time than figuring the regex solution for this.
The easiest solution would be to do a single Find & Replace, searching for the entire menu as it is now, and replacing it with the entire menu as you want it to be. This ignores completely the actual changes ("I want to move this div up here and that one down there"), and gets the job done in one operation, covering all 100 pages.
Alternatively, you can do several smaller Find & Replace operations:
Replace <div class="identification"> <div class="number">Number 3</div> </div> with <div class="identification"> <div class="number">Number 6</div> </div>
Replace <div class="identification"> <div class="number">Number 2</div> </div> with two lines:
<div class="identification"> <div class="number">Number 3</div> </div>
<div class="identification"> <div class="number">Number 2</div> </div>
Well you could move it around using javascript, or you could delete list and replace it using javascript as well.
You can use jQuery detach(), remove() and append()/appendTo() methods for this kind of manipulation.
is it always the same number you need to replace?
In dreamweaver you could do a find and replace in all files in a folder. Replace "Number 6" with "Number X" then replace "Number 4" with "Number 6" then finally replace "Number X" with "Number 4"
saves you writing a program to do it