Actually I need to replace image url when i click image then open a popup window with input field and I put url and and save it but using this method.
Like this: http://jsfiddle.net/eDMmy/9/
//Set up the dialog box
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box",
buttons : {
'OK' : function() {
var textValue = $('#myTextBox').val();
var image1 = document.getElementById("image1");
image1.src=textValue;
},
'Close' : function() {
alert('The Close button was clicked');
$(this).dialog('close');
}
}
});
.img {
height:200px;
width:200px;
}
<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl()" id="image1">
<div id="myDialog">
change url
<input type="text" id="myTextBox" />
</div>
<script>
function ChangeUrl(){
$("#myDialog").dialog("open");
var image1 = document.getElementById("image1");
$("#myTextBox").val(image1.src);
image1.src= url;
}</script>
You are setting the text field instead of reading from it, do this instead:
var image1 = document.getElementById("image1");
var url = $("#myTextBox").val();
image1.src= url;
You need to target only that image you clicked. .data() is important in this case to be able to pass the arguments. Check this solution.
http://jsfiddle.net/eDMmy/687/
//Set up the dialog box
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "A Dialog Box",
buttons: {
'OK': function() {
var img_to_update = $(this).data('link');
var textValue = $('#myTextBox').val();
document.getElementById(img_to_update).src = textValue;
},
'Close': function() {
//alert('The Close button was clicked');
$(this).dialog('close');
}
}
});
.img {
height: 200px;
width: 200px;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl(this.id)" id="image1">
<img class='img' src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" onclick="ChangeUrl(this.id)" id="image2">
<img class='img' src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onclick="ChangeUrl(this.id)" id="image3">
<div id="myDialog">
change url
<input type="text" id="myTextBox" />
</div>
<script>
function ChangeUrl(x) {
//$("#myDialog").dialog("open");
$("#myDialog")
.data('link', x)
.dialog('open');
var url = document.getElementById(x).src;
$('#myTextBox').val(url);
}
</script>
Related
So am building this meme website with JavaScript. The website will take an image from the user and bind it with an image overlay and text from the user to be able to download. The problem I am having now is I can not get the Download button to work. If the user clicks on the download button, the meme is not downloaded.
HTML
<div class="meme-generator">
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
<h2>Welcome</h2>
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#">Clear Photo</a>
<a class="button button-primary" id="memeDownloadPhoto" href="#">Download</a>
</div>
</div>
JS
<script>
(function ($) {
var $memeAddPhoto = $('#memeAddPhoto')
, $memeClearPhoto = $('#memeClearPhoto')
, $memeDownloadPhoto = $('#memeDownloadPhoto')
, $memeGeneratorImg = $('#memeGeneratorImg')
, $memeOverlay = $('#memeOverlay');
var cropper = null;
var overlay = null;
function addPhoto(e) {
clearPhoto(e);
var src = URL.createObjectURL(e.target.files[0]);
cropper = true;
$memeGeneratorImg.croppie({
url: src,
viewport: {
width: 600,
height: 600
},
boundary: {
width: 600,
height: 600
}
});
overlay = $memeOverlay.clone().removeClass('meme-hidden');
$memeGeneratorImg.find('.cr-overlay').before(overlay);
}
function clearPhoto(e) {
e.preventDefault();
if (cropper) {
$memeOverlay.addClass('meme-hidden');
$memeGeneratorImg.croppie('destroy');
cropper = null;
}
if (overlay) {
overlay.remove();
}
}
function downloadPhoto(e) {
e.preventDefault();
}
$memeAddPhoto.on('change', addPhoto);
$memeClearPhoto.on('click', clearPhoto);
$memeDownloadPhoto.on('click', downloadPhoto);
}(window['jQuery']));
I have two controls on my web page. The style of those two controls is set to display none. I want to display these two controls when printing, but I don't want these controls to show up on my web page. whenever I invoke the print function, these two controls show up on the print page, but they also show up on the web page whenever I am done printing. Below is my web page code:
<div id="test">
<span style="display:flex">
<img id="PARLogo" style="display:none" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70" runat="server" >
<span id="compName" runat="server" style="font-size:25px;color:black;width:100%; display:none"><span style="color:black"> city of test</span><br /> Test company</span>
</span>
</div>
<input type="button" id="btnPrint" value="Print" />
Below is the code to print the div tag:
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
var contents = $("#test").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
as you can see, I am making these two controls "PARLogo" and "compName" visible n javascript, but they are invisible in a web page. Not sure why, but these controls are invisible when the page loads, but as soon as I click on the print button, these two controls appear on the regular web page too which I don't want.
any help will be greatly appreciated.
have you tried css media query "print"?
#media print {
/* print specific styles go here */
}
or reset these:
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
.....
frame1.remove();
document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
document.getElementById('<%=compName.ClientID %>').style.display = "none";
I can't for the life of me figure out how to add an exit feature to my code. I want it so the user can click anywhere on the screen to make the image go away. Can someone help please?
HTML
<body>
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JS
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
The default is visible. You need to set to hidden when you want to hide it.
And you need to bind your code on the click event.
var hidden = false;
window.document.addEventListener('click', function() {
document.getElementById("image").style.visibility = hidden ? "" : "hidden";
hidden = !hidden; // comment out this line if you do not want to show again on click
}, false);
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
Update 2, if you want the timeout code to show the image after 2 seconds (as mentioned in comments) and then when you click anywhere to hide it for ever use
var image = document.getElementById("image");
setTimeout(function() {
image.style.visibility = 'visible';
window.document.addEventListener('click', function() {
image.style.visibility = 'hidden';
}, false);
}, 2000);
#image {
visibility: hidden;
}
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
</div>
<script>
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility = "visible" ? "hidden" : "visible";
},2000);
</script>
Use jQuery to make it simple..
Codepen
$(document).ready(function(){
$('body').click(function(){
$('#image').hide();
})
})
you could use this.
$(window).click(function() {
//Hide the menus if visible
document.getElementById("image").hide();
});
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
function myremove(){
document.getElementById("image").style.display = "none";
}
<body onclick="myremove()">
<div align="center">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" height="200" width="200" style="display:block;">
</div>
</body>
I want a Pure JavaScript code that will change an image and also its link to another image and another link on same place as toggle function. I have a web page and I have Anchors Links button as <img src="DownArrow.png"/> and I want that after clicking on this image, first it will lead you to the DIV2 and then it will change the code to <img src="UpArrow.png"/>. How to do this using pure JavaScript? Waiting for perfect reply and code?
This should work:
var link = document.querySelector('#arrow a');
link.onclick = function() {
var image = document.querySelector('#arrow a img');
if(this.href.slice(-1) === '1') {
this.href = '#DIV2';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
} else {
this.href = '#DIV1';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
}
}
See it in action here: http://jsfiddle.net/TM9ap/7/
Note that I've changed the href attribute in the link to #DIV1 like this <a href="#DIV1">
<!DOCTYPE html>
<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me
<img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>
<div id="DIV2" ></div>
<script>
function execute()
{
if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","DownArrow.png");
img.parentNode.setAttribute("href","#DIV2");
}
else
{
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","UpArrow.png");
img.parentNode.setAttribute("href","#DIV1");
}
}
</script>
</body>
</html>
hai im working with show/hide slider with div..evrything is working fine with my coding..
but i want my div or my content will auto hide when i click another button(image in my coding)..
i hope that anybody can help me with this..thanks in advance..
this is my html
<div id="slidingDiv">
<a href="#" class="show_hide" rel="#slidingDiv11">
<img src="../img/choose/mens.png">
</a>
<a href="#" class="show_hide" rel="#slidingDiv12">
<img src="../img/choose/womens.png">
</a>
<div id="slidingDiv11">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
<div id="slidingDiv12">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
</div>
<div id="slidingDiv1">
<a href="#" class="show_hide" rel="#slidingDiv16">
<img src="../img/choose/book.png">
<a>
<a href="#" class="show_hide" rel="#slidingDiv17">
<img src="../img/choose/textbooks.png">
</a>
<div id="slidingDiv16">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
</div>
<div id="slidingDiv17">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
</div>
</div>
this is my css
#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
height:300px;
padding:20px;
margin-top:10px;
border-bottom:5px;
display:none;
}
this is my js
$(document).ready(function () {
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View', // the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
if (options.changeText == 1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
With jQuery,
$("your_other_button").on('click', function() {
$("your_div_to_hide").hide();
});
Using Jquery
$("other_button").on('click', function() {
$("div_to_hide").toggle();
});
Since you want to hide the div when you click on a button, you should make it the document when clicked to hide. Try something like this.
$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });
use event.stopPropagation(); to stop the document event to trigger .hide_show class. May be that will help you.