All,
var a='<div id="details" onmouseover="tip(this)">';
function tip(el)
{
$(this).mouseover(function() {
var b="<div id='test'>"+el.innerHTML+"</div>";
$(b).css("display", "inline");
});
}
Is anything wrong with the above code? I am trying to display el.innerhtml on mouserover next to the hyperlink
Why not try this instead :
function tip(el) {
$(this).mouseover(function() {
$("#test").html(el.innerHTML);
$("#test").css("display","inline");
}); }
Try to expand on what you want. Give us a list of requirements spell out exactly what you want. I expect a couple of the down votes will be rescided if you do this.
For my part, try this:
<div id="details">
<script type="text/javascript">
$(document).ready(function(){
$("#details").mouseover(function(){
var $this = $(this);
$this.append("<div id='test'>"+$this.html()+"</div>");
});
})
</script>
To show/hide would have been simple call to .show() or .hide()
If you really wanted this code:
var a='<div id="details" onmouseover="tip(this)">';
Then you would have to append to the DOM:
$(document).append('<div id="details">');
And then bind your event:
$("#details").mouseover(function(){
You need to append the code to your page DOM so it could be displayed. Currently you create a div, set CSS for it but it's still only in memory.
You are using $(this) inside your function, maybe it should be $(el)? And you need to do something like $('body').append(b); as well to add the <div> to the DOM.
Related
Prestashop v1.6 default-bootstrap theme, product-list.tpl file.
I have a button add to cart and div with some smarty code:
<a class="ajax_add_to_cart_button" href="....">
<div id="div1">{if $added}Added{else}not added{/if}</div>
Now when I click to link I want to only refresh div content.
I already try some code finding in stack but my knowledge is still not enought.
What I try and it is not work:
$(document).on('click', '.ajax_add_to_cart_button', function() {
$("#div1").load() /*also $("#div1").load("#div1")*/
});
and:
$("#div1").load(location.href + " #div1");
and few more.
EDIT, also this is not work for me:
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/
return false
});
});
EDIT2: When I try this code is half working
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});
why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.
EDIT3
$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});
<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>
It is display info in all product, all container in product have now different id.
try following and check if it works..
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#one").load($(this).attr("href"));
return false.
});
});
I noticed you have wrong class in your selector. please check that too.
Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)
For example (I'm assuming that your div have mybeautifuldiv class):
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$(".mybeautifuldiv").html("result reloaded successfully");
});
});
If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.
<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>
Is this div inside 'add to cart' anchor?
If it is then you need to target it:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).find('.my-custom-div').html('Content updated!');
});
});
If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
});
});
I feel like this is something that is solved by "deferreds" or "promises" that I've heard about in jQuery, but looking searching for related articles on that doesn't exactly show me what I'm looking for.
I want to be able to do a simple jquery function call (like animate() or slideUp()) then call another simple function when it is completed. Of course I know about slideUp(400, function(){ //onComplete... }); but if you have a large cascade of animations, that can get pretty hairy pretty quickly.
Check out the following jsfiddle:
http://jsfiddle.net/ue3daeab/
When you click the first button, you see the visual effect I want to acheive. However, I'm accomplishing it with "cascade hell," and the relevant code being:
$("#clickme").click(function(){
//Cascade hell
$("#my1").slideUp(400, function(){
$("#my2").slideUp(400, function(){
$("#my3").slideUp(400, function(){
$("#my4").slideUp(400, function(){
$("#my5").slideUp(400, function(){
$("#my6").slideUp(400, function(){
$("#my7").slideUp(400, function(){
$("#my8").slideUp(400, function(){
$("#my9").slideUp(400, function(){
$("#my10").slideUp(400);
});
});
});
});
});
});
});
});
});
});
When you click button 2, all the divs collapse at once, which isn't the effect I want. I feel like I should be able to do something like this, but obviously it doesn't work. The relevant code for the 2nd button is:
$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());
Any advice? Thanks.
Why not use a simple array of ids to collapse, and then collapse them one item at a time?
$("#clickme").click(function(){
var toCollapse = ["#my1", "#my2", ...];
(function collapse(){
var id = toCollapse.shift();
if (!id) return;
$(id).slideUp(400, collapse);
})();
});
I edited your jsfiddle with this example too: http://jsfiddle.net/ue3daeab/2/
I would do something like this:
UNTESTED
$.each($('.item', '#container'), function(index, value) {
$(this).delay(50*index).slideUp(400);
});
This way everything doesn't try to happen all at once.
I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API
Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!
You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/
Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.
jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});
I know there are tons of examples on how to show or hide a div based on click or hover or some kind of user event. I'm looking for a java script sample or jquery sample that shows or hides a div based on weather the div has value. In other words. I am displaying a list of concerts in your area. If there are no concerts in your area another div should be displayed instead saying "there are no concerts in your area".
This needs to happen on page load. Without any user involvement.
Anyone ever used something like tis or a=can point me to a link that shows how to do this?
Thanks
Oceantrain
$(function(){
var $div = $("#div1");
if(!$div.html().length)
$div.hide();
});
If you would like to use a class selector, you can use the following code:
$(function(){
var $div = $(".foo");
$.each($div, function(i,v){
var _$div = $(v);
if(!_$div.html().length)
_$div.hide();
});
});
working demo here:
http://jsfiddle.net/tugberk/mAaDY/
There are tons of example to do this
Generally people use this to check/condition on value.
if( $("this").val().length === 0 ) {
$("this").hide()
Secondly
if( !$("this").val() ) { $("this").hide() }
With you can use text() or html()...
Something likevar text = jQuery("div").text();
$(function () {
var $div = $("#div1");
if($.trim($div.html()).length == 0) {
$div.hide();
}
});
$(function(){
if($("#div1").is(":empty"))
$("#div1").css("display","none");
$("#div2").css("display","block");
});
That should be one way how to make it work. For sure you must put in some logic that decides what div will be displayed.