Develop Reference

If HTML "Product A" exists, change it to "Price A" using Javascript

Okay, I’ve been trying to workaround an issue here. I’ve got so far and I may not be heading in the right direction so if there’s a better way to approach this then let me know.
I’m using Dynamic Text Replacement on a platform called Unbounce to pull form dropdown data from a form submission on my page and then place it onto a confirmation popup overlay.
What I’d like to do next is replace the dynamic text with something different based on which answer from the form has been placed there (answers are limited to 5 specific selections from a dropdown).
Basically, when someone selects product A from the dropdown in the form they would be shown a price for product A in the confirmation dialog popup (instead of being shown ‘Product A’).
I’ve come across some text replacement javascript that I’ve used and tested successfully on the page.
<h3 id="title"class="lato dark bold title">certain text</h3>
<span class="orange size22"><b id="subtitle" >this text</b></span>
<script>
if (document.getElementById('title').innerHTML == "certain text" ) {
document.getElementById('subtitle').innerHTML = 'new text';
}
</script>
My hope was to add an ID to <ub:clientsidedynamic> for it to find at least one of my dropdown options such as ‘Product A’ and replace it with my desired price.
I changed the original dynamic text source code with:
<ub:clientsidedynamic class="text-editor-dynamic-tag" id="title" contenteditable="true" method="" parameter="window_type" title="URL Parameter: window_type" wrap="true">PRICE</ub:clientsidedynamic>
adding the ID of ‘title’ in a hope that it would work with my above Javascript.
Does anybody have any idea as to why this doesn’t work? Or if I’m even heading in a plausible direction with this.
Many thanks.

I need to change a javascript code

I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.

You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle

You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>

modify datepick plugin to popup calendar when an icon is clicked

Im using a jQuery calander plugin called datepick on my site. I connect the datepicker to my input field like this:
$('.dobOnly').datepick();
Here's a working example: jsFiddle
By default the calendar pops up when the user clicks on the input. Instead, Id like for it to only pop up if the user clicks an icon next to the input.
Its propbly important to mention that there are several of these inputs on the page Im working on. As such it seems likely that a solution would have to include modifying datepick() to take the id of the related text field as an argument so that the pop up affects the intended input.
What would be the best way to edit waht I have to accomplish this?

According to the documentation you need to wrap the image in a hidden div. Then in the options for datepick specify the showOnFocus and showTrigger properties.
HTML
<input type="text" name="gd2" id="gd2"/>
<div style="display:none">
<img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/>
</div>
JS
$(function() {
$('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'});
});
JSFIDDLE: http://jsfiddle.net/xzzCf/7/
There is an example of this on the invocation tab of the documentation

Any issues with hiding a select list behind a div and selecting it with JavaScript?

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.
I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.
I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.
Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks
UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.
$('div#cover').click(function(){
$('#select').focus();
});

Your idea on hiding the select behind the div looks OK
I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)
The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility

Code is from here: jQuery - function runs fine when fired on div click, but not on page load
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();

Create a jQuery modal box that appears beside the trigger action

I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:
It should be height resizeable, so if the content is long, the box will refit.
How can I do this?

The qTip jQuery plugin is pretty good.
http://craigsworks.com/projects/qtip/

I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
This one in particular seems good
http://flowplayer.org/tools/tooltip.html

I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.
To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":
<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
<table id="my_table"> .... </table>
</div>
If you design the div correctly, you might be able to create the shape you're looking for.
Then when the button is clicked, call a Javascript function that displays and positions the div:
function openPromotionDialog() {
$("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
$("#promotion_dialog").dialog('open');
}
See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).