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
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
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/
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/