Develop Reference

java script replace for html attributes

I have a html tag like the following:
<div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
<div id="page_number1" class="numbertext">1/2</div>
<div id="slide_content1"><p>First Slide</p>
</div>
<div id="slide_h1" class="slide_h1"></div>
<div id="slide_h2" class="slide_h2"></div>
<div id="playOptions{slide_number}" class="playOptions">|
<span id="remaining_slide_time{slide_number}"></span> |
<span id="remaining_time{slide_number}"></span>
</div>
</div>
</div>
I need to replace {slide_number} with an integer. Whatever I tried the result doesn't replace the {slide_number}
var str = template.replace("{slide_number}", i);

You can use attribute selector contains that will select all elements where id contains {slide_number} and you can replace that part of the id with the number.
document.querySelectorAll("[id*='{slide_number}']").forEach(function(e) {
e.id = e.id.replace("{slide_number}", 1)
})
<div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
<div id="page_number1" class="numbertext">1/2</div>
<div id="slide_content1">
<p>First Slide</p>
</div>
<div id="slide_h1" class="slide_h1"></div>
<div id="slide_h2" class="slide_h2"></div>
<div id="playOptions{slide_number}" class="playOptions">|
<span id="remaining_slide_time{slide_number}"></span> |
<span id="remaining_time{slide_number}"></span>
</div>
</div>

in javascript you can find them from
document.querySelector('[id$="{slide_number}"]').id;
and
document.querySelector('[id*="{slide_number}"]').id;
Please read this

If you use jquery then it can be done like below:
$('#playOptions').attr('id','playOptions88');
But I recommend you to use HTML data attribute to distinguish different element. It is a very nice thing to work with multiple elements that can be needed to change dynamically.
If you change your ID attribute dynamically adding some integer number then it may be harder to catch them. Instead, use data like below code.
You can make any element unique setting the data-SOMETHING.
If you write the code below:
$('#playOptions').data('roll','100');
Then the element will be
<div id="playOptions" data-roll="100" class="playOptions">
If you write the code below:
$('#playOptions').data('name','ahmad');
Then the element will be
<div id="playOptions" data-name="ahmad" class="playOptions">
You can then catch the element by the code below:
var name = $('#playOptions').data('name');
console.log(name) //Output should be 'ahmad'
Similarly,
var roll = $('#playOptions').data('roll');
console.log(roll) //Output should be '100'
To learn more about the data attribute please see the link
https://api.jquery.com/data/

This solution worked:
var find = '{slide_number}';
var re = new RegExp(find, 'g');
str = template.replace(re, i);

Add a new custom div on button click

I am making a small web application that allows users to add sticky notes to a page by clicking the add button. The following is the html that makes up a sticky note.
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
I am just a bit unsure how to add another sticky note everytime the user clicks add. Any help would be appreciated. Thanks!

You could generate an html element by pressing a button, for example:
var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.
var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);
this code append a div into another main container. I hope that this can be help.

var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
$stickyNote = $(stickyNote);
$stickyNote.appendTo($('.sticky_notes_container'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky_notes_container">
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
</div>
<button id=addBtn>Add</button>

Assuming all this is inside a main container ,just keep that var code=<div class="sticky_note">...</div> code in a string and use
$("container").append(code);

You can easily create a new div.By using
document.createElement("div")
You can add text, classes..just look up w3school for more details..
Also i see your requirement, that clicking on button it will create a sticky note..
Element.cloneNode()
Might be helpful for you..where you make a div once with all the design and structure and use it again again..
http://www.w3schools.com/jsref/met_node_clonenode.asp

Handling an onclick event inside div tag using selenium java

How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>

http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')

Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")

Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();

I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.

Remove words from <div> generated on load

I am working on a webpage for a family member, and most content is generated upon load.
My specific problem lies in a news-function, where you can add new products. Because of the way the website is built we have added a link to the news-item, in order to allow costumers to go directly to the product. ( link is "Se mere" )
Trouble is:
When adding the new item to the news-feed, all links and formatting disappears when its shown on the right side of the page. (This is where the code is from)
Therefore, i would like to remove the "Se mere" text from the right coloumn, in the div class = "NewsItemPreviewText"
Unfortunately, i cannot access that part of the code, so i cannot choose what and how its printet.
Here you can see original code that i have access to,
`<div id="RightColumn">{$Design.rightColumn}</div>`
and this is how the code looks when generated.
<div id="RightColumn">
<div id="pagenews-box">
<div id="pagenews-box-top">
<h2>Nyheder</h2>
</div>
<div id="pagenews-box-content"> <div class="NewsItemPreview NewsItem1">
<div class="NewsItemPreviewImg">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker ">
<img src="/upload_dir/news/REVITIVEIX.w50.h50.crop.jpg" style="border:0px;" alt="Revitive
Isorocker ">
</a>
</div>
<div class="NewsItemPreviewContent" style="width:110px">
<div class="NewsItemPreviewDate">
<a href="/nyheder/4-revitive-isorocker-/#4" title="Revitive Isorocker "
class="NewsItemPreviewLink">Revitive Isorocker </a>
<br>
<div class="NewsItemPreviewDateCreated">26/11 2014 kl. 12:20
</div>
</div>
<div class="NewsItemPreviewText">
Årets julegavehit!
KUN 1795,-kr. hos os!
Se mere
</div>
</div>
</div>
</div>
<div id="pagenews-box-bottom">
</div>
</div>`
</div>
I hope you can help, please let me know if i have omitted any necessary details or code.

Using JQuery this can be done by targeting the container("NewsItemPreviewText") containing the text "Se mere" and removing it.
$('.NewsItemPreviewText:contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});
JSFiddle

You can remove it with jQuery.
http://jsfiddle.net/wilchow/pzrn88m4/
$(document).ready(function() {
$(".NewsItemPreviewText").text($(".NewsItemPreviewText").text().replace("Se mere", ""));
});

Hope this helps :)
$(':contains("Se mere")').each(function(){
$(this).html($(this).html().split("Se mere").join(""));
});

How to have a page load to the middle of the page (instead of top)?

I'd like for the page to open at a certain div halfway down the page, not at the top...
I have something like:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
How can I get the page to open at #d4, instead of the top? (Besides adding #d4 to the end to the URL...)
I imagine there must be some easy way to do this, but I can't figure out how to go at searching for a solution! HTML, javascript? Any help is greatly appreciated.

<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html

Find div position using this
and then use the following javascript command:
window.scroll(0, DIV_POS); // horizontal and vertical scroll targets

EDIT: OOPS! didn't read the Except.... disregard!
Note to self, read the entire question before responding!
End EDIT
You could always use an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
When you navigate to the page, you would include the anchor name in the url:
pagename.htm#d4
Make sure to close your div tags.
Good luck,
Patrick

You can use Javascript:
location.replace('#d4');