I have an image popup that appears on every page I navigate.
I need to know how is it possible to make it disappear if I click on close, it won't show up again for that session.
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:block;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>
You can use sessionStorage for that:
function hide() {
document.getElementById('anuntImportant').style.display='none';
if (window.sessionStorage) {
sessionStorage.setItem('hideAnuntImportant', true);
}
}
window.onload = function() {
if (window.sessionStorage) {
if (JSON.parse(sessionStorage.getItem('hideAnuntImportant'))) {
document.getElementById('anuntImportant').style.display='none';
}
}
}
<body onclick="hide()">
or use php session, you will need to call ajax request on click and and in php call start_session and set $_SESSION['anuntImportant'] to true and when you render the element you set style="display: none"
ajax.php
<?php
start_session();
$_SESSION['anuntImportant'] = true;
?>
yourpage.php
<?php
start_session();
?>
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:<?= $_SESSION['anuntImportant'] ? 'none' : 'block' ?>;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>
Related
I want to show an image when I click on the button. But right now the button hides the image when I click on it. Is there a way to reverse this? This is the code I have.
var flag = 1;
function coursework() {
if (flag == 1) {
document.getElementsById("coursework").style.display = "none";
flag = 0;
} else {
document.getElementById("coursework").style.display = "block";
flag = 1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="Wellcome.png" width="300">
</div>
Thank you :)
You can set the image to display: none; initially and then change your if-else condition accordingly so that the image is displayed on first click and hide on second click and so on. Also, it should be getElementById and not getElementsById.
document.getElementById("coursework").style.display="none";
var flag =1;
function coursework() {
if(flag==1)
{
document.getElementById("coursework").style.display="block";
flag=0;
}
else{
document.getElementById("coursework").style.display="none";
flag=1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?auto=compress&cs=tinysrgb&h=350" width="300">
</div>
I am assume scenario that initially you hide image and when click on button it will show it, may be it will different from what you want and try to give this answer. Refer following code
<html>
<body>
<button onclick="show()">Show Coursework</button>
<div id="coursework" style="display:none">
<img src="welcome.png" width="300">
</div>
<script>
function show(){
document.getElementById("coursework").style.display="block";
}
</script>
</body>
</html>
hope this will help full.
I am trying to get an alert if I chose a certain picture for example:
HTML:
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
Then I manually chose a picture that goes into 'main' and changes it src JQUERY:
<script type="text/javascript">
$('#paperb').click(function()
{
$('#pr').attr("src", "http://www.cliparthut.com/clip-arts/1008/paper-stack-
clip-art-1008442.jpg");
}); </script>
Than there comes the JS that fails:
<script type="text/javascript">
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
But this script wont work. Is it possible to get an alert from this?
What do I need to change so I can get an alert?
Thank you.
If you have multiple images & want to do some action when src value is changed for certain images, then try below;
$('#pr').on('load', function (e) {
console.log("Image Path: ", e.target.src);
if(e.target.src == "https://i.redd.it/2u0y0z5i12py.png") {
//do action a
} else if(e.target.src == "https://...bike.png") {
//do action b
}
});
Replace
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
with
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
Also the other problem is that your if statement is not declared in an event handler. So it will run only once when the script first loads. You need to place it under an event after which you want to execute it. E.g.
<script type="text/javascript">
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
</script>
Edit: Here's a working snippet.
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="https://i.redd.it/2u0y0z5i12py.png">
</div>
I have an upload button on my main page that submits to a php form, then returns the image back to the main page. What I am trying to do now is get the image element to load to an Iframe in the parent page as a variable that I can put in a div. Everything is functioning properly until the image will not display in the part of the Iframe, I think I am close but cannot see what is wrong in my code.
index.html
just the javascript , iframe, and id where the messages appears
<script type="text/javascript">
function updatepicture(pic) {
document.getElementById("image").setAttribute("src", pic);
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>
iframe.html
<script type="text/javascript">
function updatepicture(pic){
document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
<div class="caption2">
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
</div>
I had this working at one point but mistakenly changed something and now it is not working but I know I am close. Any help is appriciated
upload.php
<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
// file uploaded
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "";
parent.document.getElementById("file").value = "";
window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
</script>
<?php
} else {
// the upload failed
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
</script>
<?php
}
} else {
// the file is too big
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
</script>
<?php
}
}
?>
index.html (submit form)
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />
Upload message will go here.
Change this line:
document.getElementById("image").setAttribute("src",pic);
to this:
document.getElementById("productImage").setAttribute("src",pic);
And change this:
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
to this:
<img id="productImage" alt="Product" height="416" width="417">
You are using incorrect id there:
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
You should use productImage instead of message. Use this:
$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);
In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.
dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}
On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle
Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.
I have a problem. I have this function:
function isDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html("#isDone");
}
}
The above code does NOT work. The code above is checking if the content in an iFrame is done loading.
What i want is to have a div that says if it is NOT loaded "NOT DONE..." but if it is loaded then output another DIV into the #loadingStatus div.
UPDATE:
This is my 100 % code.
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
function isDone()
{
if(isDone){
$("#loadingStatus").html("Waiting for your advertisements to load...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none">
</div>
</div>
<iframe onload="isDone()" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
You might be looking for:
$("#loadingStatus").html($("#isDone").html());
EDIT: In your code, isDone is a function, not a variable. From what I understand, you have to do something like:
$(document).ready(function() {
$("#loadingStatus").text("Waiting for your advertisements to load...");
});
function isDone()
{
$("#loadingStatus").html($("#isDone").html());
}
Because the function isn't called until the iFrame is loaded, the not loaded message will not appear.
You need to have some default text in the isDone div.
http://jsfiddle.net/sMGTU/
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
var iFrameLoaded=false;
function checkDone(iFrameLoaded)
{
iFrameLoaded
? $("#loadingStatus").html("Finished Loading")
: $("#loadingStatus").html("Waiting for your advertisements to load...");
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none"></div>
</div>
<iframe onload="checkDone(true);"
src="<?php echo $r['url']; ?>"
width="100%" height="90%"
scrolling="auto"
frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Well, NOTDONE will never appear because there is no isDone variable that can evaluate true. Also it seems that that logic is reversed.
Instead, set the "not done" message when your main document loads, then replace it with the "done" message when the iFrame document loads:
// on document load:
$(function() {
// set "waiting" message:
$("#loadingStatus").html("Waiting for your advertisements to load...");
// on iframe load:
$('#myIFrame').load(function() {
// set "done waiting" message:
$("#loadingStatus").html($("#isDone").html());
});
});
That's it; that's all the Javascript you need. Take that horrid onLoad attribute out of your iframe markup and give the thing an ID:
<iframe id="myIFrame" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
function isDone()
{
if(isDone){
I think your problem may be that you have a boolean variable called isDone and your function definition variable is called isDone, one of these should be called something else.
Where is isDone variable set in the code? Do you have any load event handler for iframe?
Try this
$(function(){
$("#loadingStatus").html("Waiting for your advertisements to load...");
var isDone = false;
function checkIsDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
$("iframeSelector").load(function(){
isDone = true;
});
checkIsDone();
});
If you want to create a new div:
$("#loadingStatus").append($("<div/>").text("Done."));
If you want to move a div from somewhere else:
$("#loadingStatus").append($("#isDone"));
If you want to copy a div from somewhere else:
$("#loadingStatus").append($("#isDone").clone());
If you want to move the contents of an element:
$("#loadingStatus").append($("#isDone").children());
If you want to copy the contents of an element:
$("#loadingStatus").append($("#isDone").children().clone());
Update:
Seeing the rest of the code reveals some more problems with it. As you don't have any variable that determines if the content has loaded or not, and only call the function once the content is loaded, just put the code for changing the content in the function. Put the initial message directly in the element.
function isDone() {
$("#loadingStatus").append($("#isDone").children().clone());
}