We Keep Coding

JQuery single and double quotes problems

I am trying to insert a tag into the page. but inside that a tag, it has both single quote and double quote, so i try put that part into an variable Var content. Can someone tell me why this var content is not showing on onclick after code runs?
var content = "javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;"
$('<a style ="float: left; margin-top: 20px" href="#" onclick=" + content + " ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message Representative Now!" title="" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');
it was like this before but it keep showing errors
$('<a style ="float: left; margin-top: 20px" href="#" onclick="javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;" ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message !" title="Click to instant message a Now!" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');

Use the escape character \ before the quotes
like this:
var y = "We are the so-called \"Vikings\" from the north.";
see this links:
https://www.w3schools.com/js/js_strings.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_strings_escape

jquery. How to reuse functions with various elements

I'm kind of new to jquery but I'm getting a hang of it. But so far it's been fairly simple jquery.
But I am trying to write a piece of code that is a bit more dynamic
Function: I want the code to hide pictures over different times. Like one picture after 2000 milliseconds, then the next after 4000 milliseconds. But I'm still uncertain on a few things...
This is what I tried:
<div class="twelve columns" style="padding-top: 24px; text-align:center;">
<div>
<img id="1" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="2" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="3" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="4" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="5" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4mdQgvGrhwU" frameborder="0" allowfullscreen></iframe>
<hr>
<a href="{{ URL::previous()}}">
<button>Go Back</button>
</a>
</div>
</div>
<!-- Row End-->
</div>
</div>
<script>
var starNumber = 5;
var star = function() {
$("#".starNumber).hide("slow");
starNumber = starNumber - 1;
};
setTimeout(star, 2000);
setTimeout(star, 4000);
setTimeout(star, 6000);
setTimeout(star, 8000);
setTimeout(star, 10000);
</script>
I think the source of the issue is here:
var starNumber = 5;
var star = function() {
$("#" .starNumber).hide("slow");
am I able to call $("#" .starNumber)? I tried also $("#" starNumber) but did not work. How would I perform this?

In your selector $("#" .starNumber) you are not passing a valid string (which jQuery may parse in order to create the appropriate jQuery object). If you are trying to select the element with and id of "5" you must pass the string "#5" to $.
Knowing that the desired form is $("#5"), the easiest option in this case is to change the line in question from:
// This is syntactically incorrect as you are passing an "#" and
// the "starNumber" property of... nothing
$("#" .starNumber).hide("slow");
to:
// This is syntactically CORRECT, as you are concatenating an "#"
// with the value contained in the "starNumber" variable
$("#" + starNumber).hide("slow");

First, your selector need to be $('#' + starNumber) because, JS string concatenation done with +.
And if you need a re-usable function, you might use like following:
var starNumber = 0, timer, offset = 2000;
var star = function () {
if ( starNumber == 5 ) {
clearTimeout(timer);
starNumber = 0;
return;
}
setTimeout(function () {
$("#" + starNumber).hide("slow");
star();
}, offset * ++starNumber);
};
star();

Edit only javascript to add slideshow from images array

all
I have a lot of html pages on the server that opens each big image into a new window calling just one external javascript file.
I would like to edit this javascript so when I click on an image they all can be viewed using Prev and Next links buttons.
here's the html code for images:
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 1" title="image small 1"></td>
<td><img src="moreimages/imagesmall02.jpg" width="70" border="0" alt="image small 2" title="image small 2"></td>
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 3" title="image small 3"></td>
<td><img src="moreimages/imagesmall04.jpg" width="70" border="0" alt="image small 4" title="image small 4"></td>
and here's the code from javascript file:
var imagesArray = []; //array to hold all images from moreimages.html
function getImageLinks() {
var a = document.getElementsByTagName("a") //get all elements that have <a> tag
for (h in a) { // walk thru this elements
var href = a[h].attributes['href']; //from an <a> element get his href attribute
if (href) { // check if <a> tag has a href attribute
imagesArray.push(href.value); //add the value of href (image link) to the array
}
}
}
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){
LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
}
if(pos=="center"){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
}
else
if((pos!="center" && pos!="random") || pos==null){
LeftPosition=0;TopPosition=20
}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}

i think you want to make lightbox with slider
find this plugin : here

put multiple image-before-after section with jquery

I am trying to implement before-after image comparison by jquery below.It takes two images and shows the comparison.
fiddled here
<div>
(image comparison1)
</div>
<div>
(image comparison2)
</div>
<div>
(image comparison3)
</div>
though it is very useful for me for single pair comparison, but the problem is whenever I want to implement the same effect with multiple pair, the container size defined in css becomes trouble. I have tried to make the width and height of css as auto & as fit to content, but nothing seems to work. I want to implement multiple pair comparison on the same page as shown in div above.
its like pairs of before after images.Each pair is of different size. Any suggeston for corrections with my coding is really appreciated.
Thank You in advance.

After some searching, this was the solution:
<div class="beforeAfterSlidebar" style="width:400px;height: 400px;">
<div class="bottomImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>
<div class="topImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div>
</div>
<div class="beforeAfterSlidebar">
<div class="bottomImage"><img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /></div>
<div class="topImage"><img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /></div>
</div>
With the JS:
$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).find(".topImage").width(iTopWidth);
});
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Old answers - but they might help others:
I think you mean something like this?
http://jsfiddle.net/m9jj2fsp/6/
I didn't use divs, but the images instead to create the effect:
<div class="beforeAfterSlidebar">
<img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
<img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>
<img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />
</div>
The javascript to go with it:
$(".beforeAfterSlidebar").mousemove(function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).children("#middleImg").css("clip", "rect(0px," + (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
$(this).children("#botImg").css("clip", "rect(0px," + (iTopWidth - 50) + "px,600px,0)");
});
If this isn't what you needed, just tell me, and I'll try to adapt my code.

Add space before image, javascript

I am trying to put some space to the left of the radio-play.gif button. What can add to this code to achieve that?
Thanks!
// Last (only one on Mac) row has the VCR buttons.
//
s += '<td>';
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>';
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
if (player != 'MP3')
s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'stop\')">';
s += '</td></tr>';
document.write(s);
// removing mute button
var myEl = document.getElementsByName("mute");
var elP = myEl[0].parentNode.parentNode;
elP.removeChild(myEl[0].parentNode);

Either set a margin to the img tag (it needs to be display:inline-block; for this) or add
a (No breaking space).
Probably the margin would be my preferred way, e.g.
img{
display:inline-block;
margin-left:5px;
}
or
s += ' <img alt="PLAY" ...
Btw.: The correct way would be, to create the <td> and <img> elements via document.createElement and then attach them to the dom. (Or use jquery, it's a bit simpler there)

You can literally put a space character infront of it. I would do it using CSS. Give the image a class class="whatever" and then in CSS:
.whatever {
margin-left: 10px;
}
Since you're doing it inline already, you could just add the margin in the inline css.

s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';
OR, more correctly,
s += ' <img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(\'playnow\')">';

If "space" means visually rendered space to the left of the rendered button element, this would typically be done with CSS. A common implementation would be that the image tag itself, or a container of the image tag, has a CSS class attribute that assigns space appropriately. For the CSS to do this, look into things like padding, margins, absolute vs relative positioning, the left or right attributes, etc.