please refer to JSFiddle link: https://jsfiddle.net/s11oo2gg/.
We are not allowed to use jQuery and iframe here.
The problem right now if you click on resistor first and hover over different content images then come back out by clicking the X mark, the content image would get stucked where you left off and would not load the the other content images properly. It would show a broken image link.
I like to reload only the <div id="slider1_contain"> everytime I click on <span class="closeButton">(X mark) so the target content images can be loaded accordingly.
I dont not want to have location.reload(); to resolve this when the X is click. I dont want to reload the whole page but only the div.
I saw people were asking the same question and solve it with AJAX. Do I need AJAX for this case? Or is there something we can do in the following javascript?
Thank you in advance!!
<script type="text/javascript">
function showContent(target){
document.getElementById(target).style.display = 'block';
document.getElementById("boxThumb").style.display = 'none';
}
function hideContent(target){
document.getElementById(target).style.display = 'none';
document.getElementById("boxThumb").style.display = 'block'
}
</script>
<script type="text/javascript">
var children = document.querySelectorAll('.toggle > section[id]');
function showDetailContent(target) {
// Simply loop over our children and ensure they are hidden:
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
// Now, show our child we want to show
document.getElementById(target).style.display = 'block';
}
</script>
If you want to reload just the div, you can use innerHTML.
document.getElementById(target).innerHTML = '<img src="image.jpg">';
Related
I have an image gallery on my site and when you click on it, it opens into a lightbox kind of effect.
I want them to be able to click off of the preview image on the lightbox background and close the preview but not if they click on the actual preview image itself.
function get_image_preview(){
var lightbox = document.getElementById("lightbox");
var image_src = document.getElementById("gallery_image").src;
lightbox.style.display = "block";
lightbox.setAttribute("onclick", "end_image_preview()");
var new_image = document.createElement("img");
new_image.setAttribute("id", "preview_image");
new_image.setAttribute("src", image_src);
new_image.setAttribute("onclick", "return false");
lightbox.appendChild(new_image);
}
function end_image_preview(){
var lightbox = document.getElementById("lightbox");
lightbox.style.display = "none";
lightbox.innerHTML = "";
}
So basically this line:
lightbox.setAttribute("onclick", "end_image_preview()");
does what it is supposed to do and close the preview.
However, the preview is a child of this and I want them to be able to click on the image without ending the preview, so I tried this:
new_image.setAttribute("onclick", "return false");
I think you mignt want to use event.stopPropagation():
function new_image_click(e) {
e.stopPropagation();
}
new_image.setAttribute("onclick", "new_image_click(event)");
in your end image preview click listener make sure that the element does not have in its ancestor the preview element it self, lets say that you gave the preview element the id "preview"
in end_image_preview
function end_image_preview(e) {
if (e.closest('#preview')) {
return
}
// here do what you already doing
}
I am making a web chat. I have a div called chatbody. I want the div to scroll to bottom using javascript so that the last message is displayed. However, the code that I am using scrolls it to top instead. Here is the code:
<script type="text/javascript">
function chatbody() {
var myDiv = document.getElementByClassName('chatbody');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;
}
</script>
Kindly assist to solve my issue.
Try This
var myDiv = document.getElementByClassName('chatbody')[0];
function scrollToBottom(nameOfBlock) {
nameOfBlock.scrollTop = nameOfBlock.scrollHeight
}
U can pass your variable as an argument
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
How can you detect clicks on javascript which is fired from a <DIV>?
For example I have 3 adSense ads in 3 different <DIV>s on a page, and I want to detect and trigger an operation when an ad is clicked.
It is easy to detect clicks on<DIV> when it is empty, or with any other element; but how to detect clicks on adSense ad (code)?
As far as I'm aware, Adsense ads are loaded in an iframe element so accessing them would be violating the same origin policy. This means you can't detect clicks in an iframe pointing to an external URL, so it can't be done.
are you using any frameworks like jQuery? if so, you could add a click handler to a child of a div:
targetElement = $("#yourDivId").children()[0]
$(targetElement).click(function(){
alert("target element was clicked");
});
If I would really need to achieve something like this, I would cheat a bit with the user.
Instead of trying to get click on iframe, make an overlay div and place it above iframe. Attach click event to it, and when div is clicked, hide it.
It will give the user feeling that he clicked on link, but it did not worked correctly. The second time he clicks it will already worked, cause overlay is hidden.
An example code (just for explanation purpose):
<html>
<style>
.test {
position : absolute;
top : 0;
left : 0;
width : 300;
height : 300;
z-index : 999;
filter : alpha(opacity = 0);
opacity : 0;
background-color:black;
}
</style>
<script>
function start(){
var div = document.getElementById("target");
var source = document.createElement("div");
source.className = "test";
document.body.appendChild(source);
var style = source.style;
var div2 = document.createElement("div");
document.body.appendChild(div2);
source.onclick = function(e){
style.display = "none";
div.onmouseout = function(){
div2.innerHTML = "mouseout";
style.display = "";
div.onmouseout = null;
}
div2.innerHTML = "clicked";
}
}
</script>
<body onload="start()">
<div id="target">
<iframe src="http://mail.ru" style="width:300;height:300"></iframe>
</div>
</div>
</html>
I have an iframe and couple of tables on my aspx page. Now when the page loads these tables are hidden. The iframe is used to upload file to database. Depending on the result of the event I have to show a particular table on my main page (these tables basically have "Retry","next" buttons...depending on whether or not the file is uploaded I have to show respective button).
Now I have a JavaScript on the "onload" event of the iframe where I am hiding these tables to start with. When the control comes back after the event I show a particular table. But then the iframe loads again and the tables are hidden. Can any one help me with this problem. I don't want the iframe to load the second time.
Thanks
mmm you said you're on aspx page,
I suppose that the iframe do a postback, so for this it reload the page.
If you can't avoid the postback, you've to set a flag on the main page just before posting back, and check against that while you're loading...
...something like:
mainpage.waitTillPostBack = true
YourFunctionCausingPostBack();
..
onload=function(){
if(!mainpage.waitTillPostBack){
hideTables();
}
mainpage.waitTillPostBack = false;
}
I am not sure what your problem is, but perhaps your approach should be a little different. Try putting code into the iframe what would call functions of the parent. These functions would display the proper table:
<!-- in the main page --->
function showTable1() {}
<!-- in the iframe -->
window.onload = function () {
parent.showTable1();
}
This would put a lot of control into your iframe, away from the main page.
I don't have enough specifics from your question to determine if the iframe second load can be prevented. But I would suggest using a javascript variable to check if the iframe is being loaded a second time and in that case skip the logic for hiding the tables,
This is my code
function initUpload()
{
//alert("IFrame loads");
_divFrame = document.getElementById('divFrame');
_divUploadMessage = document.getElementById('divUploadMessage');
_divUploadProgress = document.getElementById('divUploadProgress');
_ifrFile = document.getElementById('ifrFile');
_tbRetry = document.getElementById('tbRetry');
_tbNext=document.getElementById('tblNext');
_tbRetry.style.display='none';
_tbNext.style.display='none';
var btnUpload = _ifrFile.contentWindow.document.getElementById('btnUpload');
btnUpload.onclick = function(event)
{
var myFile = _ifrFile.contentWindow.document.getElementById('myFile');
//Baisic validation
_divUploadMessage.style.display = 'none';
if (myFile.value.length == 0)
{
_divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please select a file.</span>';
_divUploadMessage.style.display = '';
myFile.focus();
return;
}
var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.doc|.txt|.xls|.docx |.xlsx)$/;
if (!regExp.test(myFile.value)) //Somehow the expression does not work in Opera
{
_divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports doc, txt, xls.</span>';
_divUploadMessage.style.display = '';
myFile.focus();
return;
}
_ifrFile.contentWindow.document.getElementById('Upload').submit();
_divFrame.style.display = 'none';
}
}
function UploadComplete(message, isError)
{
alert(message);
//alert(isError);
clearUploadProgress();
if (_UploadProgressTimer)
{
clearTimeout(_UploadProgressTimer);
}
_divUploadProgress.style.display = 'none';
_divUploadMessage.style.display = 'none';
_divFrame.style.display = 'none';
_tbNext.style.display='';
if (message.length)
{
var color = (isError) ? '#008000' : '#ff0000';
_divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
_divUploadMessage.style.display = '';
_tbNext.style.display='';
_tbRetry.style.display='none';
}
}
tblRetry and tblNext are the tables that I want to display depending on the result of the event.