I am having difficulty with this simple javascript where I want to nest a div inside another div. The div looks like this.
<div id="div01" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 40px; width:350px; height:250px;">
<p id="heading" class="comhdr editableText">Editable</p>
<div class="toolbar">
<a href='#' title='Options' class='icotools'></a>
<a href='#' title='Delete' class='icodelete'></a>
</div>
<br/>
<div class="link_drop_box">
<!-- Nest div here -->
</div>
</div>
In the "link_drop_box" I want to nest this div.
<div id="u0014" class="comurl" onmouseOver="url_preview('show', this, 'div01');" onmouseOut="url_preview('hide', this, 'div01');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=tf1.fr" align="middle" /> TF1.fr <img class="urlbutton" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url('u0014');"/> <img src="/images/spacer.png" class="spacer" /> <img class="urlbutton" title="Edit" src="/icodeact/Edit16.png" onClick=""/>
</div>
I try to nest this div in the previous with this javascript.
$('#'+card_id).find('.link_box_drop').append('<div id="'+link_id+'" class="link" onmouseOver="link_preview(\'show\', this, \''+card_id+'\');" onmouseOut="link_preview(\'hide\', this, \''+card_id+'\');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain='+link_ico+'" align="middle" /> '+link_info[0]+' <img class="link_button" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url(\''+link_id+'\');"/> <img src="/images/spacer.png" class="link_button_spacer" /> <img class="link_button" title="Edit" src="/icodeact/Edit16.png" onClick=""/> </div>');
I thought that with the .link_drop_box selector I could get the container div with the find function, then append. What is the right way to append an element inside that container?
Your HTML contains:
<div class="link_drop_box">
Your JQuery code:$('#'+card_id).find('.link_box_drop'), which should be:$('#'+card_id).find('.link_drop_box').
$('#div01 div.link_drop_box:first-child').append("<div id=\"u0014\" class=\"comurl\" onmouseOver=\"url_preview(\'show\', this, \'div01\');\" onmouseOut=\"url_preview(\'hide\', this, \'div01\');\"><img class=\"dhandle\" src=\"http://www.google.com/s2/favicons?domain=tf1.fr\" align=\"middle\" /> TF1.fr <img class=\"urlbutton\" title=\"Delete\" src=\"/icodeact/Delete16.png\" onClick=\"delete_url('u0014');\"/> <img src=\"/images/spacer.png\" class=\"spacer\" /> <img class=\"urlbutton\" title=\"Edit\" src=\"/icodeact/Edit16.png\" onClick=\"\"/></div>");
this will do the trick
$('div.link_box_drop', $('#'+card_id))
This selector will return "link_drop_box" in the context of the "card_id" div.
You're using jQuery. Yes, jquery is just a js library, but as you're doing, you'll run into plenty of problems trying to intertwine regular js with jQuery.
With the jQuery functions .find(), .append() etc, you usually, if not always, need the tag name in there before the class or id. Ex. .find('div.link_box_drop'), or
Look over the jQuery documentation for find() and append()
Btw, it's really hard to read that much code on one line. :-/
Related
I am currently trying to make a script that will hide/show divs right under inputs. At the moment, I am targeting every single inputs and every single divs by ID (which I find might be a bit heavy, instead of targeting divs relatively to the input position).
So right now it looks a bit like this :
jQuery(document).ready(function(){
jQuery('#inputbutton1').on('click', function(event) {
jQuery('#divtarget1').toggle('show');
});
});
jQuery(document).ready(function(){
jQuery('#inputbutton2').on('click', function(event) {
jQuery('#divtarget2').toggle('show');
});
});
and so on. Is there a way I could take, say, the event.target and from there, reach the div relative to that input button. So that way I would have a single script with variable values rather than 30 scripts with unique ID selectors. Each input button/div combos come as follows (They are scattered through the page, but always come in pairs.) :
<div class="hideshowdiv"><input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'></div>
<div id="divtarget1" class="spellimg"><img src="image.jpg" alt="Image"></div>
Thanks in advance.
Use following code. It's flexible and will work for every new image you add.
$(document).ready(function() {
$('input').on('click', function(event) {
$(this).parent().next().toggle('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
I'm a trainee and actually I'm working on a web shop.
Now I got the problem that I have multiple images placeholders (image_1-6) for our article images. Problem now is, if the article only has 2 images the placeholders for the other 4 are still there. So is there any possibility to hide them if the src is empty or a parameter defined by me?
Here is the code snippet:
<div class="sideimg grid_2">
<div id="image_1" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
</a>
</div>
<div id="image_2" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
</a>
</div>
<div id="image_3" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
</a>
</div>
<div id="image_4" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
</a>
</div>
<div id="image_5" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
</a>
</div>
<div id="image_6" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
</a>
</div>
</div>
Here is the live version(wip): http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423?
All I know about html css and js I learned by myself so I hope the snippet is fine.
So as you can see I have 6 images with js image swap. The only left problem is that our database don't contains an image for every placeholder, so if there are only 4 pictures there are still 2 empty boxes. So how can i get rid of them?
Thanks all for your help and excuse my english I'm from Germany.
You can try using the CSS selector for html attributes like this:
.lb_detailimg[src]{
(Whatever css u need goes here)
display: block;
}
.lb_detailimg{
display: none;
}
If any <img> of class lb_detailimg does not have a src attribute it will not be displayed.
You could also use a keyword in the src attribute to make this happen, like this:
.lb_detailimg{
(Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
display: none;
}
EDIT:
As you cannot give style to a parent element in CSS here is a JS snippet that should work fine:
window.onload = function(){
var img_containers = document.getElementsByClassName("lb_thumb");
for(var i=0; i<img_containers.length;i++){
if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
img_containers[i].style.display = "none";
}
}
}
At line 4 in the if ==> .indexOf("yourKeyWordHere")
If div .element has specific class .block / <div class="element block"> then delete html node .element img
HTML:
<div class="element">
<img src="images/picture.jpg" alt="" />
<img src="images/picture.jpg" alt="" />
</div>
Want to delete img, how to do this by Jquery?
Why not something simple like that?
$('.element.block').find('img').remove();
$('.element.block img').remove ()
This removes only images which are in blocks with the both classes
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.
I'd like for the page to open at a certain div halfway down the page, not at the top...
I have something like:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
How can I get the page to open at #d4, instead of the top? (Besides adding #d4 to the end to the URL...)
I imagine there must be some easy way to do this, but I can't figure out how to go at searching for a solution! HTML, javascript? Any help is greatly appreciated.
<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html
Find div position using this
and then use the following javascript command:
window.scroll(0, DIV_POS); // horizontal and vertical scroll targets
EDIT: OOPS! didn't read the Except.... disregard!
Note to self, read the entire question before responding!
End EDIT
You could always use an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
When you navigate to the page, you would include the anchor name in the url:
pagename.htm#d4
Make sure to close your div tags.
Good luck,
Patrick
You can use Javascript:
location.replace('#d4');