We Keep Coding

How to replace URL parameter by element width

I have some elements on page where I want to get displayed with of each element of certain class and put it to an URL parameter by replacing a string.
Sorry I am a JS newbie!
HTML for objects on page is like:
<div class="getwidth" style="background-image: url('//domain.de/picture1.jpg?w=putwidth');">...
</div>
<div class="getwidth" style="background-image: url('//domain.de/picture2.jpg?w=putwidth');">...
</div>
jQuery onload function:
jQuery('.getwidth').each(function() {
var wrapper = jQuery(this);
var width = wrapper.width();
wrapper.html(wrapper.html().replace(new RegExp(/putwidth/, 'g'), width));
});
Wanted output example if element is 245px wide:
<div class="getwidth" style="background-image: url('//domain.de/picture2.jpg?w=245');">...
</div>
Getting the element width seems to work. Replacing the string doesn´t.

Use replace with css:
wrapper.css("background-image", wrapper.css("background-image").replace(/putwidth/g, width));

How to replace an <img/> HTML tag using JavaScript .replace() method

I have a img tag like
<img src="Mesothelioma_image_1.jpg"/>
I want to replace this tag with something like
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>
By keeping the same src attribute value.

You can use querySelector() to find the image. It would be easier if the image contains an id attribute.
Then, use createElement() to create the dom element by name amp-img.
Use setAttribute() to assign attributes to the new elements such as class, src, width, erc.
Use insertBefore() to add new element to the page and remove() to remove the old image element.
NOTE: I am selecting the old image with its src, please change it as per your need.
var oldImage = document.querySelector('img[src="Mesothelioma_image_1.jpg"]');
var newImage = document.createElement('amp-img');
newImage.setAttribute("class","blog-image");
newImage.setAttribute("src", oldImage.getAttribute('src'));
newImage.setAttribute("width","50");
newImage.setAttribute("height","20");
newImage.setAttribute("layout","responsive");
oldImage.parentNode.insertBefore(newImage, oldImage);
oldImage.parentNode.removeChild(oldImage);
console.log(document.querySelector('amp-img[src="Mesothelioma_image_1.jpg"]')); // to find the appended new image
<img src="Mesothelioma_image_1.jpg"/>

Please see below code.
You will need to access img using parent class or Id.
i have did this work on a link click event, You can do this on document.ready or any other event as well.
jQuery('.clickMe').click(
function(e){
e.preventDefault();
var img = jQuery('.parent img').attr('src');
var newhtml='<amp-img class="blog-image" src="'+img+'" width="50" height= "20" layout="responsive"></amp-img>';
// console.log('IMG: '+ img);
jQuery('.parent').html(newhtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img src="https://mosthdwallpapers.com/wp-content/uploads/2016/08/Pakistan-Flag-Image-Free-Download.jpg"/>
</div>
<a class="clickMe" href="#">Click Me </a>
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>

Get alt attribute of images inside a Contenteditable div and replace the image

I've implemented small web chat application and used smileys in it.
I've made my div contenteditable="plaintext-only" and adding both text and smileys images to that div.
whenever user clicks on smileys, an image with unicode character as alt will bind to the contenteditable div and he can also type text in it.
So, Finally after clicking the send button, I need to get the whole content in div and replace the images with unicodes in the alt and get the plain text as text itself and send message.
My smileys binding code :
$("span.emo", container).click(function () {
debugger;
var toSlice = $(this).attr("data-emoji").split('-'); // get unicode Character
var preview = emojione.toImage(toSlice[1]); // unicode to image conversion
$('.mydiv').html($('.mydiv').html() + preview); // append image to the div
});
My div's Content after adding images and text
<div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 100px">
<img class="emojione" alt="👸" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4"><img class="emojione" alt="😺" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
<img class="emojione" alt="😸" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4"><img class="emojione" alt="😽" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
<img class="emojione" alt="😼" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4"><img class="emojione" alt="🙀" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4"> Hello Users<br>
</div>
My Send Button Code
function Send() {
debugger;
//var allimgs = $('.mydiv').find('.emojione');
var alldata = $('.mydiv').html(); // getting all html data but dont know how to loop through every element
var childrendata = $(".mydiv").children(); // here I'm not getting the text, only getting the images as array
var contenteditable = document.querySelector('[contenteditable]'),
text = contenteditable.textContent; // here also I'm getting only text
}
My question is :
I need to get the data and loop through every element and replace all images with unicodes. My final data should be like : 👸😸😼 Hello Users

You can iterate over children() and use replaceWith() to replace the img by its alt attribute.
function Send() {
$('.mydiv').children('.emojione').each(function () {
$(this).replaceWith($(this).prop('alt'))
});
}
Fiddle Demo

Add this little snippet for a demo transformation. It replaces images with their alt tag, pretty straight forward.
/* Added snippet */
window.transform = function() {
$('.emojione').each(function () { // for each emoji
var unicode = $(this).attr('alt'); // grab attribute 'alt'
this.outerHTML = unicode; // set the images entire html as the alt tag instead
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 50px">
<img class="emojione" alt="👸" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4">
<img class="emojione" alt="😺" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
<img class="emojione" alt="😸" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4">
<img class="emojione" alt="😽" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
<img class="emojione" alt="😼" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4">
<img class="emojione" alt="🙀" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4"> Hello Users
</div>
<!-- Added Button -->
<button onclick="transform()">Transform!</button>

I can't assign an ID to an already loaded Java script

I tried everything and couldn't link my Image IDs to a preloaded Generic.js file in the Head section. Here's my HTML below:
<div id="bgimgwrapper">
<noscript>
<div>
<img id='bgNoScript' src='index_files/background1.jpg'
alt='' title='' width='100%' height='100%' />
</div>
</noscript>
<img class="active" id="bg0" src="index_files/background1.jpg"
style="width: 100%; display: none;">
<img id="bg1" src="index_files/background2.jpg"
style="width: 100%; display: block;">
</div>
bg0 and bg1 should be assigned to a function inside the preloaded generic.js, here's the function:
function bgStart() {
setCurrentCycle();
$bg = $('<img style="width:100%">'), bg = $bg[0];
$bg.hide().load(bgLoad);
$bg.addClass("active");
bg.id = "bg" + currentCycle;
bg.src = slideArray[currentCycle];
$bg.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg)
}
bgStart() basically is a background image slider. In firebug though, I can't even see the evaluation "ev" sign next to each ID divs. Appreciate your comments.

don't understand why you are using 2 references for your new bg element... how about:
$bg = $('<img style="width:100%">');
$bg.hide().load(bgLoad)
.addClass("active")
.attr('id', 'bg' + currentCycle)
.attr('src', slideArray[currentCycle])
.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg);

change the image doesnt work

here is my javasript:
$(function() {
$(".image2").click(function() {
var image = $(this).attr("rel");
$('#random_img').hide();
$('#random_img').fadeIn('slow');
$('#random_img').attr('src') == image;
var image2 = $('#random_img').attr('src');
$("#thumb2 a img").removeClass("open");
$("#thumb2 a[rel='" + image2 + "'] img").addClass("open");
return false;
});
});
here is my html:
<div id="image2">
<img id="random_img" src="/documents/templates/projedepo/banner/indigovision.jpg" height="420" width="964" />
</div>
<div id="thumb2">
<a href="#" rel="/documents/templates/projedepo/banner/canon.jpg" class="image2">
<img title="Canon" class="slider_thumb" src="/documents/templates/bilgiteknolojileri/images/t_flash/t1.png" border="0"/></a>
<a href="#" rel="/documents/templates/projedepo/banner/indigovision.jpg" class="image2">
<img title="IndigoVision" class="slider_thumb" src="/documents/templates/bilgiteknolojileri/images/t_flash/t2.png" border="0"/>
</a>
</div>
when i click on a thumbnail, the animation fadeIn and hide works, but the image is not changed...why?

Thank u #Shurdoof! now everything works fine!
here is the solution:
$('#random_img').attr('src',image);

To change the image, specify second argument to attr:
$('#random_img').attr('src', image);
Instead of this which won't work:
$('#random_img').attr('src') = image;
Check out the second version of attr here for more info.
You are also not storing src in your image variable but its rel attribute here:
var image = $(this).attr("rel");
Which should be:
var image = $(this).attr("src");

Check http://api.jquery.com/attr/
Also, you are using equality operator == where you may usually use assignment operator =. This won't work with .attr method though..

$('#random_img').attr('src') == image;
should be
$('#random_img').attr('src') = image;