Develop Reference

Cannot append image with jquery

I currently have a code working where i can add a class based on the url of a page using jquery. However I would like add an image to a div instead of just adding a class. I'm not as proficient in java-script as I could be but I think there is probably a pretty simple solution. The code that doesn't work is
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var img = document.createElement("img");
img.src = '~/Content/Images/Template 5A Filmstrip.jpg" />';
}
the code that works right now that I dont want to use is
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var $body = $('body');
$body.addClass('campaign');
}
How can apply what I do know that works to what I am trying to get to work?

If for some reason you don't want to use jQuery for this part, you just need to append the element to the body of the html document (or wherever you want it to end up) like so:
Javascript Code
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var body = document.getElementsByTagName("BODY")[0];
var img = document.createElement("img");
img.className = 'img-responsive'
img.src = '~/Content/Images/Template 5A Filmstrip.jpg';
body.appendChild(img);
}

You can add a <img> to any element using the jQuery .append() function in the following way:
var imageToAppend = '<img src="http://example.com/img.png" height="200" width="200"/>';
$('#myElementId').append(imageToAppend); //This will append you HTML to the div with id "myElementId"
You can read more about this here: http://api.jquery.com/append/
Happy coding! =]

You should use the element where you need to append (prepend) the image element so the code will look something like:
$("base element selector").append(img);
but you need to consider that the address of the image source may not be correct from the browser point of view - consider the page is hosted in application like http://server.com//applicationgroup/applicationroot/Content/Images/.....jpg may not be pointed with ~/Content/Images/.....jpg you rather need to translate the address to the full server address on the server side.

In my case I just had to remove "~" from:
<img src="~/assets/icons/ic_chevron2.svg" class="rot-90" />
resulting in:
<img src="/assets/icons/ic_chevron2.svg" class="rot-90" />

Select data attribute within object tags for an SVG

I have a relatively large SVG file, so much so that I would not like to put the entire XML code into my html file. As such, I have been using the object tags to refer to it and implement effects such as changing the transparency within css.
However, I would now like to use some javascript to select this object element and when clicked, change the data attribute to load a different SVG file (essentially alternating between images).
This is a trivial operation using normal img tags but the same approach doesn't seem to work using the object tags.
Here's what I have so far:
<div class="title-bar">
<h1 class="heading">A Gathering of ...</h1>
<object id="trooper" data="images/trooper.svg" type="image/svg+xml"></object>
</div>
For the html, and for the javascript:
addEventListener("load", start);
// else { attachEvent("onload", start); }
function start(){
var logo = document.querySelector("#trooper");
logo.addEventListener("click", logoChange);
}
function logoChange(){
console.log("Clicked");
var src = this.getAttribute("data");
if(src === "images/trooper.svg"){
this.setAttribute("data", "images/rebel.svg");
} else {
this.setAttribute("data", "images/trooper.svg");
}
}
Thanks

the problem is you are using this inside of the logoChange function.
you will have to use the logo variable for getting and setting values.

I would just use the img Tag and avoid the object (don't know the current status, but when I messed around it with Flash some years ago ... strange things happened quite too often):
<img src="images/trooper.svg"></img>
An then just change the source like you used to do ...
(but you can't have JS inside you SVG with img)

proper place to insert iframe in html

I have an iframe element which I create dynamically. Where should I append this iframe if I am not sure if there is a body tag in the html or not ? I was thinking of appending this as child of html tags like div which I have to create dynamically too. But I need to append the div somewhere. Again I am not sure where to append the div.

You have to insert it in a body tag. So if there is no body tag, just insert a body tag after the head element, and the iframe tag in the body tag.

I guess you must do it like this.
Check if body exists, If it does not exists create it.
var dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
if(!document.body)
{
var body = dom.createElement("body");
body.innerHTML = "<iframe></iframe>";
dom.firstChild.appendChild(body);
}
else
{
document.body.innerHTML = "<iframe></iframe>";
}

Your question seems to be asking how to accommodate non-standard HTML documents. If you absolutely must, and cannot insist that the document provider make their documents standards-compliant, I would check for a body tag and, if present, append to that. If not available, I'd test for the html element and append to that. Beyond that, I'd decline to serve the other party in this regard.
if (document.getElementsByTagName('body')) {
...
} else if {document.getElementsByTagName('html')) {
...
} else {
console.log("We're sorry, but your document is poorly constructed
and we won't be serving you today.");
}

jQuery to change element Attributes and return the edited Html Source back?

Actually what i'm doing is to find the <img> image tags and get its src attribute to change them.
I already got upto this point but the problem more is: To get the edited the html source back (to put into the database.)
To say more brief & clearly, i'm about to grab some Dynamic Html Containers and then change the image paths and save the whole source chunk back.
For brief example if i search inside $(div.container).html() on this:
<div class="container">
<..> .. </..>
<..>
<img src="images/apple.jpg" />
<..>
<img src="images/banana.jpg" />
</..>
</..>
</div>
Firstly, lets say <..> represent any of not previously knowable html tags.
Then i will get:
var dom_contents = $("div.container").html();
Now i got the original html source inside the target container <div>
Then lets say i need to change each <img src with sample/ for its folder. It will then be fruits/apple.jpg and fruits/banana.jpg.. etc.
I still getting some of the stuffs like:
$("div.container).each(function() {
var arr = $(this).find("img");
for (var i=0; i<arr.length; i++) {
var img_src = $(arr[i]).attr("src");
/*
* I NEED TO CHANGE THE IMAGE SRC HERE
*/
}
});
** Finally, i need to save this the whole edited html source into the database. **
So how do i change the <img src='' .. and
How do i get this whole edited html source, back from the jQuery?

Amend the source attribute for each image as follows. You don't need to write the html back. The source html will be updated:
$("div.container").each(function() {
$(this).find("img").each(function() {
$(this).attr("src", "/image/url/file.png");
});
});
To get the html source of the container, use the following:
$("div.container").html();

This will set the attribute:
$(arr[i]).attr("src", mynewsrcvalue);
Once you're done just send the innerHTML (or .html()) back in an AJAX request. But if you want this stuff in a database, why not just manipulate the source on the server side in the first place?

How to update HTML element with jQuery and Galleria?

I am using Galleria for a slideshow. I want to place a small, 'Larger' link beside the stage.
I have this code for the 'Larger' button:
this.fullres = this.create('div', 'fullres');
this.get('fullres').innerHTML = 'Larger';
this.appendChild('fullres', this.fullres);
I have this code that assigns every <img>'s rel= tag to the full sized image URL from the page's custom field:
<img ... rel="<?=$attachments[$i]['fullres']?>" />
With JQuery, I am hoping to pull the active image's rel= tag value and append the .fullres href tag. This is the code I have so far, but it doesn't work:
var title = $(.images).attr('rel'); // pulls the fullres url from the rel tag
$('.galleria-fullres').attr('href', ); //append the galleria fullres href with the rel info

Galleria doesn't really work like that. But what you can do, is to create a button to enter fullscreen and have a larger image in fullscreen.
Something like this:
$('#galleria').galleria({
// other galleria options here
dataConfig: function( img ) {
// get the fullscreen image
return {
big: $( img ).attr('rel')
};
}
});
var galleria = Galleria.get(0);
$('#fullscreen-button').click(function() {
galleria.enterFullscreen();
});

I have to say I can't see how this would work as it is...
Do you know you have a typo at: $(.images)? Should be $('.images').
And have you left out the second parameter at $('.galleria-fullres').attr('href', ); on purpose? Shouldn't this be $('.galleria-fullres').attr('href', title); ?
How can the jquery work by referencing the elements by classes? You are getting an array of elements, not just one. I guess this is only an excerpt of your code? Am I missing something?
Could you perhaps post the html of a sample of these elements as seen in the browser? It should be a pretty easy thing, but I really can't see the whole picture with those lines only.