Jump to content
funstad

Javascript attibute grabber

Recommended Posts

Hey all i have following problem:

 

I have a drag and drop editor which allow me to edit a URL, or allow me to edit a image trough a pop up screen.

Now i want to change this so i edit the code of a image with URL (click able image).

 

As you can see in the code below, everything works fine. Except it only shows 1 attribute

 

So when i remove the <a></a> tags it shows the image url

When i remove the <img></img tags it show the website url

 

when i enable both only 1 shows up (website url)

 

Anyone with a bit more javascript knowledge knows whats wrong ?

 

Javascript:

    //edit link & image    if(big_parent.attr("data-type")=='imagelink'){            $("#sim-edit-imagelink .imagelink").val(big_parent.children('img').attr("src"));    $("#sim-edit-imagelink .imageurl").val(big_parent.children('a').attr("href"));    $("#sim-edit-imagelink").fadeIn(500);    $("#sim-edit-imagelink .sim-edit-box").slideDown(500);        $("#sim-edit-imagelink .sim-edit-box-buttons-save").click(function() {    $(this).parent().parent().parent().fadeOut(500);    $(this).parent().parent().slideUp(500);        big_parent.children('img').attr("src", $("#sim-edit-imagelink .imagelink").val());    big_parent.children('a').attr("href", $("#sim-edit-imagelink .imageurl").val());    });

html code

    <div class="sim-row-edit" data-type="imagelink" style="text-align:left">    <a href="http://google.be" target="_blank">    <img src="http://fietsendezwaluw.be/news/builder/img/layout1/img4.jpg" alt="" width="195" height="155" />    </a>    </div>

html code popup screen

<div class="sim-edit" id="sim-edit-imagelink"><div class="sim-edit-box" style="height:330px;" ><div class="sim-edit-box-title">Edit image and url</div><div class="sim-edit-box-content"><div class="sim-edit-box-content-text">URL image:<span>(please use http://)</span></div><div class="sim-edit-box-content-field"><input type="text" class="sim-edit-box-content-field-input imagelink"/></div><div class="sim-edit-box-content-text">URL link:<span>(please use http://)</span></div><div class="sim-edit-box-content-field"><input type="text" class="sim-edit-box-content-field-input imageurl"/></div></div><div class="sim-edit-box-buttons"><div class="sim-edit-box-buttons-save">Save</div><div class="sim-edit-box-buttons-cancel">Cancel</div></div></div></div>

Click here for the live example

as you can notice when you press on a image it only show http://google.be

and it doesn't show the image url.

Edited by funstad

Share this post


Link to post
Share on other sites
$(function (){ // Resize    function resize(){    $('.resize-height').height(window.innerHeight - 50);    $('.resize-width').width(window.innerWidth - 250);    //if(window.innerWidth<=1150){$('.resize-width').css('overflow','auto');}        }$( window ).resize(function() {resize();});resize();         //Add Sections$("#newsletter-builder-area-center-frame-buttons-add").hover(  function() {    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeIn(200);  }, function() {    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeOut(200);  });$("#newsletter-builder-area-center-frame-buttons-dropdown").hover(  function() {    $(".newsletter-builder-area-center-frame-buttons-content").fadeIn(200);  }, function() {    $(".newsletter-builder-area-center-frame-buttons-content").fadeOut(200);  });$("#add-header").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").show();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").hide();  });  $("#add-content").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").show();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").hide();  });  $("#add-footer").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").show();  });          $(".newsletter-builder-area-center-frame-buttons-content-tab").hover(  function() {    $(this).append('<div class="newsletter-builder-area-center-frame-buttons-content-tab-add"><i class="fa fa-plus"></i> Insert</div>');    $('.newsletter-builder-area-center-frame-buttons-content-tab-add').click(function() {    $("#newsletter-builder-area-center-frame-content").prepend($("#newsletter-preloaded-rows .sim-row[data-id='"+$(this).parent().attr("data-id")+"']").clone());    hover_edit();    perform_delete();    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeOut(200);    })  }, function() {    $(this).children(".newsletter-builder-area-center-frame-buttons-content-tab-add").remove();  });     //Editfunction hover_edit(){$(".sim-row-edit").hover(  function() {    $(this).append('<div class="sim-row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></div>');    $(".sim-row-edit-hover").click(function(e) {e.preventDefault()})    $(".sim-row-edit-hover i").click(function(e) {    e.preventDefault();    big_parent = $(this).parent().parent();        //edit image    if(big_parent.attr("data-type")=='image'){            $("#sim-edit-image .image").val(big_parent.children('img').attr("src"));    $("#sim-edit-image").fadeIn(500);    $("#sim-edit-image .sim-edit-box").slideDown(500);        $("#sim-edit-image .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);            big_parent.children('img').attr("src",$("#sim-edit-image .image").val());       });    }        //edit link    if(big_parent.attr("data-type")=='link'){        $("#sim-edit-link .title").val(big_parent.text());    $("#sim-edit-link .url").val(big_parent.attr("href"));    $("#sim-edit-link").fadeIn(500);    $("#sim-edit-link .sim-edit-box").slideDown(500);        $("#sim-edit-link .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-link .title").val());        big_parent.attr("href",$("#sim-edit-link .url").val());        });    }            //edit linkonly    if(big_parent.attr("data-type")=='linkonly'){        $("#sim-edit-linkonly .url").val(big_parent.children('a').attr("href"));    $("#sim-edit-linkonly").fadeIn(500);    $("#sim-edit-linkonly .sim-edit-box").slideDown(500);        $("#sim-edit-linkonly .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.children('a').attr("href", $("#sim-edit-linkonly .url").val());        });    }    //edit link & image    if(big_parent.attr("data-type")=='imagelink'){            $("#sim-edit-imagelink .imagelink").val(big_parent.children('img').attr("src"));    $("#sim-edit-imagelink .imageurl").val(big_parent.children('a').attr("href"));    $("#sim-edit-imagelink").fadeIn(500);    $("#sim-edit-imagelink .sim-edit-box").slideDown(500);        $("#sim-edit-imagelink .sim-edit-box-buttons-save").click(function() {    $(this).parent().parent().parent().fadeOut(500);    $(this).parent().parent().slideUp(500);        big_parent.children('img').attr("src", $("#sim-edit-imagelink .imagelink").val());    big_parent.children('a').attr("href", $("#sim-edit-imagelink .imageurl").val());    });    }        //edit title        if(big_parent.attr("data-type")=='title'){        $("#sim-edit-title .title").val(big_parent.text());    $("#sim-edit-title").fadeIn(500);    $("#sim-edit-title .sim-edit-box").slideDown(500);        $("#sim-edit-title .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-title .title").val());        });    }        //edit text    if(big_parent.attr("data-type")=='text'){        $("#sim-edit-text .text").val(big_parent.text());    $("#sim-edit-text").fadeIn(500);    $("#sim-edit-text .sim-edit-box").slideDown(500);        $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-text .text").val());                               });    }        //edit icon    if(big_parent.attr("data-type")=='icon'){            $("#sim-edit-icon").fadeIn(500);    $("#sim-edit-icon .sim-edit-box").slideDown(500);        $("#sim-edit-icon i").click(function() {      $(this).parent().parent().parent().parent().fadeOut(500);      $(this).parent().parent().parent().slideUp(500);               big_parent.children('i').attr('class',$(this).attr('class'));        });    }//        });  }, function() {    $(this).children(".sim-row-edit-hover").remove();  });}hover_edit();//close edit$(".sim-edit-box-buttons-cancel").click(function() {  $(this).parent().parent().parent().fadeOut(500);   $(this).parent().parent().slideUp(500);});   //Drag & Drop$("#newsletter-builder-area-center-frame-content").sortable({  revert: true});    $(".sim-row").draggable({      connectToSortable: "#newsletter-builder-area-center-frame-content",      //helper: "clone",      revert: "invalid",      handle: ".sim-row-move"});//Deletefunction add_delete(){    $(".sim-row").append('<div class="sim-row-delete"><i class="fa fa-times" ></i></div>');        }add_delete();function perform_delete(){$(".sim-row-delete").click(function() {  $(this).parent().remove();});}perform_delete();//Bekijken $("#newsletter-builder-area-center-frame-buttons-exp").click(function(){         $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        export_content = $("#newsletter-preloaded-export").html();        $("#export-textarea").val(export_content)    $( "#export-form" ).submit();    $("#export-textarea").val(' ');     });//Download $("#newsletter-builder-sidebar-buttons-abutton").click(function(){         $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        export_content = $("#newsletter-preloaded-export").html();        $("#export-textarea").val(export_content)    $( "#export-form" ).submit();    $("#export-textarea").val(' ');     });          //Export $("#newsletter-builder-sidebar-buttons-bbutton").click(function(){        $("#sim-edit-export").fadeIn(500);    $("#sim-edit-export .sim-edit-box").slideDown(500);        $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        preload_export_html = $("#newsletter-preloaded-export").html();    $.ajax({      url: "_css/news.css"    }).done(function(data) {    export_content = '<style>'+data+'</style><link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" type="text/css"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><div id="sim-wrapper"><div id="sim-wrapper-newsletter">'+preload_export_html+'</div></div>';        $("#sim-edit-export .text").val(export_content);            });                $("#newsletter-preloaded-export").html(' ');        });});

This is the full code, line 119 is empty ?

Share this post


Link to post
Share on other sites

I was looking at the code on the demo, I was using breakpoints on the script tab to show which if statement it was going into.It looks like it's going into the right one now, but I think setting the value is failing because the img element is not a child of the div element.

Share this post


Link to post
Share on other sites

the strange thing is when i only have a img element in the div it works for image, if i only have a element in the div it works for url

 

but it only shows 1 when i enable both functions, does it search in the first element only ? maybe it need to be alterd so it search in the entire div tag and not in the first element after the div tag ?

Share this post


Link to post
Share on other sites

the strange thing is when i only have a img element in the div it works for image, if i only have a element in the div it works for url

That's not strange, that is exactly what you're telling it to do. When you have this structure:
<div><a><img></a></div>
Then the only child of the div is the A tag. The image tag is not a child of the div, the img is a child of the A tag. You're specifically telling it to look for children, not any descendant.

Share this post


Link to post
Share on other sites

That's not strange, that is exactly what you're telling it to do. When you have this structure:

<div><a><img></a></div>
Then the only child of the div is the A tag. The image tag is not a child of the div, the img is a child of the A tag. You're specifically telling it to look for children, not any descendant.

 

mmmh i see, so this cannot be done this way, then i need to search further :/

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...