I have an image button which changes images with a click of a button . This is the following code
function changeImg(thisImg)
{
var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
var tmpImg = null;
function changeImg(thisImg) {
tmpImg = thisImg.src;
thisImg.src = altImg;
altImg = tmpImg;
}
this is the fiddle http://jsfiddle.net/pUbrv/ which I did previously for clickable images
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="changeImg(this)" />
Instead of just chnaging the image by click of a button , I want to pop up a div which contains clickable images after I click the image in the div , the image choud change . Can please anybody help me?
Here is simple Javascript solution.
DEMO
HTML
<body>
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="myfunction(this)" />
</body>
SCRIPT
var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
var tmpImg = null;
function changeImg(thisImg) {
tmpImg = thisImg.src;
thisImg.src = altImg;
altImg = tmpImg;
}
function myfunction(ele) {
var pop=new myPop();
pop.popOut(ele);
}
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(ele) {
tmpImg = ele.src;
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = '<img alt="" src="'+altImg+'" id="imgClickAndChange" />';
altImg = tmpImg;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
CSS
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
Pollisbly the jQuery UI dialog can help you.
Since the changing of images you have already implemented, you just need to put the images in the dialog.
Also you may like the modal functionality of the dialog.
Edit
If you don't want to use jQuery UI, then here is what you can do:
Create a new div.
Initially make it hidden or set its display property to none.
When user clicks on the image, make this div visible.
Set its position to absolute and set its left and top corrdinates as you want.
Add the image this div,
and finally add the event handler to this div for changing the images.
Related
I am writing a simple jQuery plugin for my purpose, which:
creates a background div (for blocking purposes, like a modal dialog). (referenced with backDiv)
shows that background.
shows $(this).
removes background and hides $(this) when background clicked.
I am able to do all of these except 4th one: As I can't save a reference to the background div, I cannot get it back and remove it.
I tried $(this).data('backDiv',backDiv); and $(this)[0].backDiv = backDiv;
I know that there are various plugins that does this including the jQuery's own dialog function, but I want to create my own version.
I cannot keep this variable globally, so, how can I keep a reference to backDiv in a jQuery object, (or DOM object?) if that's even possible at all?
update: I allow multiple of these elements show on top of each other: Nested modal dialogs.
update-2:
(function($) {
$.fn.showModal = function() {
var backDiv = $('<div style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');
$(this).data('backDiv', backDiv);
$('body').append(backDiv);
//TODO: bringToFront(backDiv);
$(this).show();
//TODO: bringToFront($(this);
var thisRef = $(this);
backDiv.click(function() {
thisRef.closeModal();
});
return $(this);
};
$.fn.closeModal = function() {
//PROBLEM (null): var backDiv = $(this).data('backDiv');
//backDiv.remove();
$(this).data('backDiv', '');
$(this).hide();
}
}(jQuery));
$(document).ready(function() {
$('#a').showModal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a" style="display:none;z-Index:2;background:red; width: 100px; height:50px;position:absolute"></div>
I suggest you to work in terms of complex dom objects, something similar angular directives, basically, you have to work with components that are represented in the dom as Group of Objects.
So, following what I'm saying, your modal component should be something like that:
var Modal = (function($) {
var tpl = '<div style="display:none;" class="modal"><div class="modal-backdrop"></div><div class="modal-content"></div></div>';
function Modal(container) {
var self = this;
this.container = $(container || 'body');
this.tpl = $(tpl).appendTo(this.container);
this.content = $('.modal-content', this.tpl);
this.backdrop = $('.modal-backdrop', this.tpl);
this.isOpened = false;
this.ANIMATION_DURATION = 500;
this.backdrop.click(function(e) { self.toggle(e) });
}
Modal.prototype.show = function(cb) {
var self = this;
cb = $.isFunction(cb) ? cb : $.noop;
this.tpl.fadeIn(this.ANIMATION_DURATION, function() {
self.isOpened = true;
cb();
});
return this;
};
Modal.prototype.hide = function(cb) {
var self = this;
cb = $.isFunction(cb) ? cb : $.noop;
this.tpl.fadeOut(this.ANIMATION_DURATION, function() {
self.isOpened = false;
cb();
});
return this;
};
Modal.prototype.toggle = function() {
if(this.isOpened) {
return this.hide();
}
return this.show();
};
Modal.prototype.setContent = function(content) {
this.content.html($('<div />').append(content).html());
return this;
};
return Modal;
})(window.jQuery);
function ExampleCtrl($) {
var modal = new Modal();
modal.setContent('<h1>Hello World</h1>');
$('#test').click(function() {
modal.show();
});
}
window.jQuery(document).ready(ExampleCtrl);
.modal {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.modal .modal-backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
}
.modal .modal-content {
width: 300px;
height: 150px;
background: #fff;
border: 1px solid yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
line-height: 150px;
text-align: center;
}
h1 {
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test Modal</button>
Add data-backDiv="" into you dynamic modal div
Change below
var backDiv = $('<div data-backDiv="" style="width: 100%; height: 100%; background-color: rgba(55, 55, 55, 0.5); position:absolute;top:0px;left:0px;">This is backDiv</div>');
In order to retrive data attribute value using JQuery use following code
Syntax
$('selector').data('data-KeyName');
Example
1. $(this).data('backDiv'); // use to retrive value or
2. var temp=$(this).data('backDiv'); // use to retrive value and assign into variable
I have the following hacked code to fadein text and fadeout an image on hover. I want to repeat this affect on a second image/div but I can't get it to work. i tried copying all the scripting and changing the variable names (i.e. img2 instead of img1 etc.) and I tried adding multiple handlers to the existing code but it doesn't work. Only one image will fade while the other one does not. Please help. If it is not abdunantly clear, I am a Jquery wannabe who has some HTMl skills and a rudimentary understanding of programming. Thanks
<style type="text/css">
#imgContainer {
position: relative;
}
#img1 {
opacity: 100;
filter:alpha(opacity=100);
position: relative;
top: 0px;
left: 0px;
}
#imgContainer div {
position: absolute;
top: 20px;
left: 60px;`enter code here`
}
</style>
<script type="text/javascript">
var speed = 0.8;
var fadeTimerImg, fadeTimerTxt;
function fade(obj,dir){
if(fadeTimerImg){clearInterval(fadeTimerImg);}
if(fadeTimerTxt){clearInterval(fadeTimerTxt);}
fadeTimerImg = setInterval(function(){setOpacity(obj,dir)},100);
fadeTimerTxt = setInterval(function(){setOpacity(oTxtContainer,-dir)},100);
}
function setOpacity(obj,dir) {
obj.curOpac = obj.curOpac + (speed * dir);
if(obj.curOpac < 0){obj.curOpac = 0;}
if(obj.curOpac > 10){obj.curOpac = 10;}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
}
}
window.onload=function(){
var oImg1 = document.getElementById('img1');
oImg1.curOpac = 10; //10 = opaque
oTxtContainer = document.getElementById('txtContainer');
oTxtContainer.curOpac = 0; //0 = transparent
oImg1.onmouseover = function(){fade(this,-1);}
oImg1.onmouseout = function(){fade(this,1);}
}
</script>
<div id="imgContainer">
<div id="txtContainer">
s`enter code here`ome text<br />
more text <br />
some more text
</div>
<img id="img1" src="FRY751_A.jpg">
</div>
Add the same class to each image, and do this, for example:
window.onload=function(){
var $images = $('.my-image-class');
$images.each(function() {
$(this).curOpac = 10; //10 = opaque
$(this).onmouseover = function(){fade(this,-1);}
$(this).onmouseout = function(){fade(this,1);}
});
}
I've searched for similar question for quite a long time but all my searches gone in vain. Here is my code
<div class="footer-sidebar container" style="height:40px;"></div>
<button class="button">Click</button>
Now if someone clicks on button then my .container height should increase to 400px and if someone clicks on the same button it must back to 40px.
Edit: (Added CSS)
.footer-sidebar {
position: fixed;
z-index: 1500;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
}
Thanks
You could do that by adding a class to your div like this:
$('.button').on('click', function(){
$('.container').toggleClass('open');
}
Inline styles for this should be avoided. Use your css file and add something like this to it:
.container {
height: 40px;
}
.container.open {
height: 400px;
}
Javascript version (opposed to the previously added JQuery option):
Using booleans (tested):
var fullSize = false; // Used for toggling
var button = document.getElementsByClassName("button")[0]; // Get button
var div = document.getElementsByClassName("footer-sidebar")[0]; // Get div
button.onclick = function() {
if(fullSize) { div.style.bottom = 0 + "px"; fullSize = false; } // If div is already 400px...
else { div.style.bottom = -360 + "px"; fullSize = true; } // If div is already 40px...
};
Fiddle
Using classes (untested):
CSS:
.open {
height: 400px;
}
.closed {
height: 40px;
}
Javascript:
var button = document.getElementById("button"); // Get button
var div = document.getElementsByClassName("footer-sidebar container")[0]; // Get div
button.onclick = function() {
if(div.className = "closed") { div.className = "open" }
else if(div.className = "open") { div.className = "closed" }
else { div.className = "open" }
}
Hope this helps.
http://jsfiddle.net/xNnQ5/
I am trying to use JavaScript (and HTML) to create a collapsible menu (c_menu) for my website. I would like it to be opened when the user clicks on the div menu_open, and to close when the user clicks menu_close. However, when I load the page, all that happens is the menu simply scrolls up, as if I have clicked menu_close, which I haven't. What should I do?
Code:
index.html (Only a snippet)
<style type = "text/css">
#c_menu {
position: absolute;
width: 435px;
height: 250px;
z-index: 2;
left: 6px;
top: 294px;
background-color: #0099CC;
margin: auto;
</style>
<div id="menu_open"><img src="images/open.jpg" width="200" height="88" /></div>
<input type="button" name="menu_close" id="menu_close" value="Close"/>
<div id="c_menu"></div>
<script type = "text/javascript" src = "menu.js"> </script>
menu.js (Full code)
document.getElementById("c_menu").style.height = "0px";
document.getElementById("menu_open").onclick = menu_view(true);
document.getElementById("menu_close").onclick = menu_view(false);
function menu_view(toggle)
{
if(toggle == true)
{
document.getElementById("c_menu").style.height = "0px";
changeheight(5, 250, 0);
}
if(toggle == false)
{
document.getElementById("c_menu").height = "250px";
changeheight(-5, 0, 250);
}
}
function changeheight(incr, maxheight, init)
{
setTimeout(function () {
var total = init;
total += incr;
var h = total + "px";
document.getElementById("c_menu").style.height = h;
if (total != maxheight) {
changeheight(incr, maxheight, total);
}
}, 5)
}
Try this:
document.getElementById("menu_open").onclick = function() {menu_view(true)};
document.getElementById("menu_close").onclick = function() {menu_view(false)};
When you define the function with a parenthesis ( ...onclick = menu_view(true) ), the function is called automatically.
When you have a function with no parameters, you can use it like you did, but without the parenthesis:
document.getElementById("menu_open").onclick = menu_view;
document.getElementById("menu_close").onclick = menu_view;
I am using jqPlot to create and display charts.
Can I please have some help to display a button on the same page as the graph that will enable an image to be created of the chart so that the image can be saved to file.
Here is my code:
<script class="code" type="text/javascript">
$(document).ready(function(){
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
var plot1 = $.jqplot('chart1', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Angle (radians)'
},
yaxis:{
label:'Cosine'
}
}
});
var c = $(document.createElement("button"));
c.text("View Plot Image test");
c.addClass("jqplot-image-button");
c.bind("click", {
chart: $(this)
}, function (h) {
var j = h.data.chart.jqplotToImageElem();
var i = $(this).nextAll("div.jqplot-image-container").first();
i.children("div.jqplot-image-container-content").empty();
i.children("div.jqplot-image-container-content").append(j);
i.show(500);
i = null
});
var c = $("<button type='button'></button>")
.text('View Plot Image test')
.addClass('jqplot-image-button')
.insertAfter($('#chart1'));
});
The graph and button are shown. However, if I click on the button, no graph is shown to be saved. Can I please have some help to fix this?
Your problem is that you aren't actually adding the button into the DOM. Try this:
var c = $("<button type='button'></button>")
.text('View Plot Image test')
.addClass('jqplot-image-button')
.insertAfter($('#chart1'));
What this will do is add a button as a sibling element to the chart1 div, so that it will appear below the plot.
Edit:
Looking at the problem, there is actually a bit more to it than that. The following code is adapted from here:
if (!$.jqplot.use_excanvas) {
var outerDiv = $(document.createElement('div'));
var header = $(document.createElement('div'));
var div = $(document.createElement('div'));
outerDiv.append(header);
outerDiv.append(div);
outerDiv.addClass('jqplot-image-container');
header.addClass('jqplot-image-container-header');
div.addClass('jqplot-image-container-content');
header.html('Right Click to Save Image As...');
var close = $(document.createElement('a'));
close.addClass('jqplot-image-container-close');
close.html('Close');
close.attr('href', '#');
close.click(function() {
$(this).parents('div.jqplot-image-container').hide(500);
})
header.append(close);
$('#chart1').after(outerDiv);
outerDiv.hide();
outerDiv = header = div = close = null;
var btn = $(document.createElement('button'));
btn.text('View Plot Image');
btn.addClass('jqplot-image-button');
btn.bind('click', {chart: $('#chart1')}, function(evt) {
var imgelem = evt.data.chart.jqplotToImageElem();
var div = $(this).nextAll('div.jqplot-image-container').first();
div.children('div.jqplot-image-container-content').empty();
div.children('div.jqplot-image-container-content').append(imgelem);
div.show(500);
div = null;
});
$('#chart1').after(btn);
btn.after('<br />');
btn = null;
}
Using this I was able to show the button and have it produce the downloadable image.
Note also that your current code is creating the button twice - just replace that code with code above.
Try this.
Add this function:
function addButton() {
$('div.jqplot-target').each(function () {
var outerDiv = $(document.createElement('div'));
var header = $(document.createElement('div'));
var div = $(document.createElement('div'));
outerDiv.append(header);
outerDiv.append(div);
outerDiv.addClass('jqplot-image-container');
header.addClass('jqplot-image-container-header');
div.addClass('jqplot-image-container-content');
header.html('<div class="header">Right Click to Save Image As...');
var close = $(document.createElement('a'));
close.addClass('jqplot-image-container-close');
close.html('Close</div>');
close.attr('href', '#');
close.click(function () {
$(this).parents('div.jqplot-image-container').hide(500);
})
header.append(close);
$(this).after(outerDiv);
outerDiv.hide();
outerDiv = header = div = close = null;
var btn = $(document.createElement('button'));
btn.text('View Plot Image');
btn.addClass('jqplot-image-button');
btn.bind('click', { chart: $(this) }, function (evt) {
var imgelem = evt.data.chart.jqplotToImageElem();
var div = $(this).nextAll('div.jqplot-image-container').first();
div.children('div.jqplot-image-container-content').empty();
div.children('div.jqplot-image-container-content').append(imgelem);
div.show(500);
div = null;
});
$(this).after(btn);
btn.after('<br />');
btn = null;
});
};
Then add a call to it at the end of the "$(document).ready(..." script that draws your chart/graph, just before the last '});'
I took the code from the example.js that is included in the download of jqPlot and made it a function.
Its not quite right, the header could do with some CSS to pretty-fy it a bit but it works.
CSS Edit.
The css needed to correct the 'Save as..' plot is below.
.jqplot-image-button {
margin-bottom: 15px;
margin-top: 15px;
}
div.jqplot-image-container {
position: relative;
z-index: 11;
margin: auto;
display: none;
background-color: #ffffff;
border: 1px solid #999;
display: inline-block;
margin-top: 25px;
}
div.jqplot-image-container-header {
font-size: 1.0em;
font-weight: bold;
padding: 5px 15px;
background-color: #eee;
}
div.jqplot-image-container-content {
padding: 15px;
background-color: #ffffff;
}
a.jqplot-image-container-close {
float: right;
}