I'm able to work with jquery draggable as follows:
<script type="text/javascript">
jQuery(document).ready(function(){
$('#dragThis').draggable(
{
stop:function(event,ui) {
var teste = $("#teste").offset();
var pos = ui.helper.offset();
$("#posX").val(pos.left - teste.left);
$("#posY").val(pos.top - teste.top);
var posX = $("#posX").val();
var posY = $("#posY").val();
$('#X').val(posX);
$('#Y').val(posY);
},
containment: "parent",
cursor: "move",
});
});
</script>
In the form to get the exact coordinates x and y put in span tag
<div id="teste" style="width:200px; height:200px">
<span id="dragThis">
<input type="text" name="title" style="background: transparent">
<span id="posX"></span>
<span id="posY"></span>
</span>
</div>
But the problem is that the coordinates are starting at the edge of the input.
When you generate the GD image text is not exactly where it should:
How to capture the coordinates of the text start?
Thanks help
Related
I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.
here is my code, i'm not posting the css here
HTML :
<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>
</div>
JQUERY :
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked
var rating = $(this).data('rating');
alert(rating);
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element
});
Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.
So instead of this
$(this).addClass('selected');
you use this, similar to how you have previously.
$(this).prevAll().andSelf().addClass('selected');
But I would also remove the hover class so that it's obvious to the user on click
$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');
Demo
<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html>
<head>
<title>Rating System jQuery Plug by Aldanis Vigo</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style type='text/css' language='css'>
.record{
opacity: .50;
}
#value-display{
position: relative;
top: -5px;
margin-left: 10px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<span value='0' id='ratingbar'>
<img class='record' number='1'/>
<img class='record' number='2'/>
<img class='record' number='3'/>
<img class='record' number='4'/>
<img class='record' number='5'/>
<span id='value-display'>0 / 5</span>
</span>
</body>
<script>
//Change these variables to your liking!!
var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
var iconwidth = '20px';
var iconheight = '20px';
var value = $('#ratingbar').attr('value');
$('#ratingbar img').each(function(){
//Set the icon for each
$(this).attr('src', iconsrc);
$(this).attr('width', iconwidth);
$(this).attr('height', iconheight);
$(this).hover( function(){
$(this).css('opacity','1');
$(this).prevAll().css('opacity','1');
});
$(this).click( function(){
//Clear all of them
$(this).parent().attr('value',$(this).attr('number'));
$(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}else{
$(this).css('opacity','.50');
}
});
});
$(this).mouseout( function(){
$(this).css('opacity','.50');
$(this).prevAll().css('opacity','.50');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}
});
});
});
</script>
</html>
I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products
Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});
There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin
You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()
Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/
I am using this code (smarty php template code)
{foreach $rewards as $reward}
<div id="reward" data-id="{$reward['id']}">
<div class="reward_data{$reward['id']}">
<b>{strtoupper($reward['title'])}:</b><br/>
{html_entity_decode($reward['description'])}
<br/>
<br/>
<b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
<br/>
<br/>
<button class="btn btn-danger">Select This Project</button>
</div>
</div>
<br/>
<br/>
<br/>
{/foreach}
and in jquery i am using
$(document).ready(function () {
$('#reward').hover(function () {
var reward_id = $(this).attr('data-id');
$('.reward_data' + reward_id).css("background-color", "#2bde73");
$('.reward_data' + reward_id).css("padding", "10px");
$('.reward_data' + reward_id).css("border-radius", "10px");
}, function () {
var reward_id = $(this).attr('data-id');
$('.reward_data' + reward_id).css("background-color", "#ffffff");
});
});
On hover ist result from foreach the background color is changed but on 2nd and above results there is effect of on hover. Please help me related this
I am thankful to you
For simply changing the background color on hover, CSS is the tool you need. First of all, you need to use class instead of id as ids should be unique.
So
<div id="reward" data-id="{$reward['id']}">
Becomes
<div class="reward" data-id="{$reward['id']}">
Then create a new CSS rule as follows
.reward:hover .reward-data {
background-color: #2bde73;
padding: 10px;
border-radius: 10px;
}
No need for JS and jQuery.
See this: Can multiple different HTML elements have the same ID if they're different elements?
If you know that an ID needs to be unique, you'll see that this won't work: you have the ID "reward" multiple times.
A solution could be that you change the ID to a class, and change the hash to a dot in your jquery.
change your id to class:
{foreach $rewards as $reward}
<div class="reward" data-id="{$reward['id']}">
<div class="reward_data{$reward['id']}">
<b>{strtoupper($reward['title'])}:</b><br/>
{html_entity_decode($reward['description'])}
<br/>
<br/>
<b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
<br/>
<br/>
<button class="btn btn-danger">Select This Project</button>
</div>
</div>
<br/>
<br/>
<br/>
{/foreach}
And jquery as below:
$(document).ready(function () {
$('.reward').hover(function () {
var reward_id = $(this).attr('data-id');
$('.reward_data' + reward_id).css("background-color", "#2bde73");
$('.reward_data' + reward_id).css("padding", "10px");
$('.reward_data' + reward_id).css("border-radius", "10px");
}, function () {
var reward_id = $(this).attr('data-id');
$('.reward_data' + reward_id).css("background-color", "#ffffff");
});
});
I need help please. How do I add links to images in the code below. This is a script that allows visitors to click a choice on a dropdown menu in a form, and every choice changes the image presented. I am trying to add a link to each image that will allow the visitors to hover their mouse over the image and it opens up a larger image.
I just need to know where to add the link. Everytime I add it in the var sel_imgs=[ , it disables the function of changing the images when the visitor selects an option in the dropdown menu.
function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com
var sel_imgs=["images/md01.jpeg","images/md01.jpeg","images/md02.jpeg","images/md03.jpeg","images/md04.jpeg","images/md06.jpeg","images/md05.jpeg","images/pic07.jpeg","images/pic08.jpeg"];
var d=document;
theValue=sel_imgs[theValue];
if (!theValue || !d.getElementById ) return;
var obj = d.getElementById(objId);
if (obj) obj.src=theValue;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
And here is the form code lower down on the page:
<img src="images/md01.jpeg" alt="" name="theImg" width="147" height="161" id="theImg" style="border: 1px solid #ffffff;" align="LEFT" /><strong>Add a vase:</strong>
<input type="checkbox" name="anniv" id="anniv" value="6.95" onclick="priceUpdate('anniv');"/>
£6.95
</td>
<td width="71%" align="left" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></br> <select name="productColors" id="productColors" style="width:270px; margin-bottom:5px; margin-top:5px" onchange="diva_imgBySel('theImg',this.selectedIndex)">
<option value="MD1004">Select Flower Arrangement</option>
<option value="MD1004">Bloom</option>
<option value="MD1001">Majestic</option>
<option value="MD1007">Mothers Day Premium</option>
<option value="MD1002">Mum's the Word</option>
<option value="NF1011">Joyful Orchids</option>
<option value="NF1010">Lily and Rose Hand Tied</option>
<option value="NF1013">Sunflower Sensation</option>
<option value="SF002-free-vase">Tranquililty</option>
</select></td>
Here is the node with the mouseover effect attached. it works fine, but repeats the same large image for each selection the user makes. I need to know how to duplicate this effect for each image not just "md01.jpeg".
<a href="#" rel="imgtip[1]"><img src="images/md01.jpeg" alt="" name="theImg" width="147" height="161" id="theImg" style="border: 1px solid #ffffff;" align="LEFT" /><a/>
<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
<script type="text/javascript" src="ddimgtooltip.js">
/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
Here is the code for image mouseover. It is a .js file
/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["images/pic01.jpg"]
tooltips[1]=["images/pic02.jpg"]
tooltips[2]=["images/pic03.jpg"]
tooltips[3]=["images/pic04.jpeg"]
tooltips[4]=["images/pic05.jpeg"]
tooltips[5]=["images/pic06.jpeg"]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
//***** NO NEED TO EDIT BEYOND HERE
tipprefix: 'imgtip', //tooltip ID prefixes
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")
This code sample doesn't actually refer to the markup you want to focus on. WHat you've got here is the logic and form elements will change the src of the img tag with an id of 'theImg'. What you need to look at is the element with the 'theImg' id and add a listener there to fire whatever large image effect that you want.
<option value="MD1001"><img src="your_image_path"/>Your non-Link Text</option>
That's how I would lay it out. I'm not sure what exactly your asking for. But this will put an image in there. Just replace the "your_link" , "your_image_path" with your data.
for example ive got a div like:
<div class="y1">
<img src="i/o.png" />
</div>
and
<!-- pre load -->
<div class="p1" style="display:none">
<h5 class="ob">Title</h5>
<img class="ob" src="i/ob.png" />
<small class="ob">Description</small>
PLAY
</div>
and this jquery
<script type="text/javascript">
$("div.y1").hover(
function () {
$('div.p1').slideDown('slow', function() {
});
}
);
</script>
my question is how can i repeat it for 12 times. i mean when i hover on y1, show p1, y2 => p2, y3 => p3 ... y12 => p12. i hope you guys understand me. thank you so much!!!!
Should look like:
$(function(){
$('div[class^=y]').hover(function(){
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideDown('slow', function() {
});
}, function() {
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideUp('slow', function() {
});
});
});
Example: http://www.jsfiddle.net/Q5Ug2/
I'm going to assume that your y# divs are inside a div with the id container. Secondly, I'm going to assume that none of your y# divs have any other classes applied to them.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow');
}).delegate('div[class^=y]', 'mouseleave', function(){
$('div.p' + this.className.slice(1)).slideUp('slow');
});
This uses delegate to avoid the cost of binding to multiple DOM elements.
Edit To hide the p# div on hovering on another element, you can use this code.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow').siblings().slideUp();
});
Do things a bit differently..
Use ID's for the p# and y# series indicators.
On your DIV tags for the p# series, add a title of the y# series.. so <div id="p1" title="y1">
On your DIV tags for the y# series, add a class.. <div id="y1" class="hoverMe">
$('div.hoverMe').hover( function() {
$('[title=' + $(this).attr('id') + ']').slideDown('slow');
});