I have this basic website that has multiple images and I want to display the 'alt' attributes under each image via javascript. I have tried a few ideas and I made it work. But my problem now is that I want this basic website to be loaded by another, a parent website, via 'iframe'.
So I have this line of code into the parent website
<iframe id="iframeID" name="iframeName" src="...my basic website" scrolling="auto" frameborder=0 width="100%" height="700"></iframe>
and it loads the basic website with the images. The website with the images has this kind of code:
<div id="gallery">
<div class="image-container">
<img src="imageOne.jpg" alt="An image of an elephant">
</div>
<div>...</div>
</div>
In the parent website, under
<script></script>
I have this code:
var gallery = document.getElementById('gallery');
var imageContainers = gallery.getElementsByClassName('image-container');
// Loop through the image containers:
for (var i = 0; i < imageContainers.length; i++) {
var image = imageContainers[i].getElementsByTagName('img')[0];
var caption = document.createElement('span');
caption.innerHTML = image.alt;
window.frames[0].document.getElementById('gallery').getElementsByClassName('image-container')[i].appendChild(caption);
}
and nothing happens.
When I have the exact same code but with a different end line in the 'script' of the basic website where the images are
imageContainers[i].appendChild(caption);
or
document.getElementById('gallery').getElementsByClassName('image-container')[i].appendChild(caption);
but without the
window.frames[0]
and I load that website via 'iframe' or just open it via its link, all works. I just can't seem to make the 'alt' attributes or any text to display in the 'iframe' HTML from the parent website. I can change the style of the iframe HTML but cannot add text into a 'div' or 'span' or anything. And I do not understand why.
If you could help it would be great.
Thank you.
p.s: I need the basic website to be loaded by the parent website via 'iframe'; the javascript that displays the 'alt' attributes has to be in the parent website, not in the one that is being loaded
p.s.2: both websites are in the same domain and both are mine
Related
I am writing an application that loads up with local html pages.
My html pages include some images as well , I want to show these images in a custom size in default (say 400px * 200px) , and displays in original size when user clicked in .
For example this is my image tag in html doc:
<img src="exclamation.png"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px">
What changes I must make to achieve the approach ?
Check this solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img src="https://cdn.pixabay.com/photo/2017/01/06/23/13/snow-crystals-1959292_960_720.jpg" id="abc"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px" >
<script>
$("#abc").click(function(){
$("#abc").attr("style","width:200px;height:200px;vertical-"+
"align:middle;padding-left:5px");
});
</script>
I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.
Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO
You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.
I came across a strange problem . I have a jsp , which is calling an iframe . The iframe gets loaded with data from java.
Now to render the iframe i am using customized control-modal.js.
Now my iframe is coded after li tag like this :
<li>
<a id="modalLink" href="#myModal">Set up my Modal</a>
</li>
<div id="myModal" >
<div class="modalsubcol">
<p class="close"><img src="/.../close-button.gif" alt="Close"/></p>
<iframe id="modal-frame"style="display:none;" height="430"
width="675" src="<%= getTheModal()%>"></iframe>
</div>
</div>
And i call the modal in the head part of my jsp like this :
<script type="text/javascript">
window.onload=function modalOverride(){
var myModal;
$('modal-frame').style.display ='block';
myModal = new Control.Modal($('modalLink'), {
afterOpen : function(){$$('.close a').invoke('observe','click',function(e){Control.Modal.close(); Event.stop(e);});},
opacity: 0.3,
width: 675,
fade: true,
fadeDuration: 0.1,
autoOpenIfLinked: false
});
}
</script>
Now the link : Set up my Modal is part of a page containing many links. When i bring that page up, the java class that renders the data fro the modal also gets called. But this must happen only when , i click on the Set up my Modal link.
Before some one tells me , this issue is not due to
window.onload
event, i have used it as otherwise the modal does not get loaded when i click the a fore mentioned link. I have tried by removing the window.onload event as well. If i do that, the java class still gets loaded and now my iframe does not get loaded . No errors come up in fire bug as well.
When you drop this on the page:
<iframe id="modal-frame"style="display:none;" height="430" width="675" src="<%= getTheModal()%>"></iframe>
The source of the iframe is loaded regardless pf whether you have the display: none css property set.
Also note, JSPs do not "call" iframes, they simply render an iframe tag in the HTTP response, the browsers than interprets the iframes and renders the iframe src
If you wish to show/hide the iframe you can do so with JQuery:
$('.modal-frame').toggle();
If you truly wish to only include the other page when you click a link, you need to use AJAX to make a request when the link is clicked or load an iframe dynamically with Javascript.
I written a simple image editor PHP script, users can add images from galleries to editor area and merge all finally.
now my problem is:
galleries open as popup and editor area is parent page, i need a javascript or jquery code when a user clicked on a item in popup page, image added to parent page in specific div.
here is destination div code:
<div id="objects">
<div class="obj_item"><img id="obj_1" class="ui-widget-content" src="elements/1.png" /></div>
<div class="obj_item"><img id="obj_2" class="ui-widget-content" src="elements/2.png" /></div>
</div>
please help me,
thanks
You can target the parent using window.opener
$('#objects', window.opener).append('image code');
I've got a body background image that is being "placed" by a plugin called ezBigResize that basically allows the image to scale with the browser window.
The designer wants to image though to be able to be swapped out by a series of thumbnails on the page, along with that image being randomized on page load from that series of images.
Initially before those two additions, I just had it setup like this:
$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});
Then this is the code now (in a jQuery Tools scrollable)
<div id="bkgrSelector">
<div class="scrollNav">
<a class="prev browse left"></a>
</div>
<div class="scrollable">
<div class="items">
<img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
</div>
</div>
<div class="scrollNav">
<a class="next browse right"></a>
</div>
</div>
I'm a little over my head though to allow these to both randomize on page load and to swap out the image via the value in the href.
I tried something like this, but it didn't work and is obviously inclomplete. Plus, it doesn't address the randomization at all.
$('#bkgrSelector .items img[href]').click(function()
{
$("body").css("background-image", "url()");
});
Any ideas, help, etc. would be appreciated.
Are those <img> pointing at the full-sized image file? I absolutely LOATHE sites that use full-size images and shrink them to thumbnail size. The load times are attrocious.
If they're actually thumbnail-sized images, you won't be able to use that url directly as your background url, as you'd just be stretching a small thumbnail-sized image to cover the window and get a hideous pixelized mess.
If the page is being dynamically generated, you'd want to create a JS array that contains the URLs of the full-sized image urls, so that when a thumbnail is clicked, you can get the fullsize url from that array. Or at least have a standardized naming convention so a simple string manipulation lets you turn the thumbnail url into a fullsize image url.
Once you've got that array, it's a simple matter to randomize a choice from it:
var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];
$(document).ready(function() {
randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
$("body").css("background-image", 'url(' + randomURL + ')');
});