Getting the HTML of a DIV with another element - javascript

I have a bunch of thumbnails. Of these I know the link in my JQuery script - however, I need to get the HTML from the .caption, and I just can't make it do that.
I've tried the following things
$('a.thumbnail').click(function() {
$(this).closest('.caption').html()
$(this).find('.caption').html()
$(this).children('.caption').html()
});
Here's the HTML:
<div class="thumbnail">
<a href="#" class="thumbnail">
<img src="{{ URL::asset($item->image) }}" alt="">
</a>
<div class="caption" align="center">
{{ $item->name }}
</div>
</div>

This would also work, since the .caption is a sibling of your a:
$('a.thumbnail').click(function() {
$(this).siblings('.caption').html();
});
Why yours don't work:
$(this).closest('.caption').html() // .caption is not an ancestor of the a
$(this).find('.caption').html() // .caption is not a descendant of the a
$(this).children('.caption').html() // .caption is not a child of the a

Try:
$('a.thumbnail').click(function() {
$(this).closest('div.thumbnail').find('.caption').html();
});
jsFiddle example
When you click the image, you need to use .closest() to traverse up to the containing div, and the use find to go back down to .find() the caption.

You could try:
$(this).parent().find('.caption').html();

Try this:
$(".caption").text();
or Perhaps
$(".thumbnail").find(".caption").text();
Although these might give you the entire class. Have thought about adding ids?
I've done this before using the Razor engine:
#foreach (var temp in ListOfStuffWithIds)
{
<tr class="class" >
<td class="tdClass" >
<input id="#temp.Id" type="checkbox" /></td>
<td class="tdClass2">#temp.Id</td>
<td>#temp.Name</td>
</tr>
}

Related

can I make image get focus using className

I want to focus on image link by javascript, the problem is that I don't have direct access to my image.
<li classe="product-1">
<div classe="shop">
<a class="img-link" src="xxxxxx">
<img class="image1">
</a>
</div>
</li>
i tried using access to give focus to the image but doesn't work
var imaglink = document.getElementsByClassName("product-1")[0].getElementsByClassName("shop")[0].getElementsByClassName("img-link")[0];
imagelink.focus();
if anyone have any suggestion ho to resolve this probleme i will be thankful
Possible typo, depending on language I think... I notice in your code you have some lines with classe="..." other times class="..."
with your li element have classe, that might be returning an undefined value, so the rest of your selection isn't going to work.
const img = document.querySelector("li a > img")
img.focus()
or
const img = document.querySelector(".shop > a img")
or if there multiple images
const img = document.querySelectorAll(".product-1 img")[0]
You can just combine the selectors together and use querySelector like
document.querySelector(".product-1 .shop .img-link").focus();
document.querySelector(".product-1 .shop .img-link").focus();
a:focus{
display:inline-block;
border:20px solid #ccc;
}
<li class="product-1">
<div class="shop">
<a href class="img-link">
<img class="image1" src="https://picsum.photos/200/300">
</a>
</div>
</li>

How to change text under an image when the image is clicked/hovered on

I'm creating a page for a company where they have pictures of the 4 founders all side by side. The text under all 4 images needs to change based on what photo is clicked or hovered on. So one says "mark" in bold and under that it will have his qualifications. But that will all be replaced when I click "kim" who is the next picture.
I'm very new to HTML, CSS, and have never tried javascript so this is my first attempt.
I want the text to be styled the way I want, but I can't find a way to update it all. I only figured out that I can print raw text.
Is there a way to call a div to put the text there and replace it with a new div for each image click?
Like instead of writing .html("Mark does xyz") you could instead paste in the entire div "tr1" with the changed button and heading and paragraph?
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>
You can use show/hide method for your requirement.
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
#tr2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
$('#Mark').click(function() {
var elementToClone = document.getElementById('tr1');
var clone = elementToClone.cloneNode(true);
var container = document.getElementById('container');
// Then you need to append that cloned element into a container on the page.
container.appendChild(clone);
});
The container will be en element in your HTML that currently is not there. This is just a place where you want this cloned HTML to go:
<div id="container></div>
This will get you to a point where you've copied the HTML you need and placed it where you want it on the page. When you click a different image, you'll need to remove this HTML, clone the other HTML and append it to container. You'll also probably need an if statement in there to check if container contains something already.
You're using jQuery in your question, so this answer uses the jQuery click function -- if you don't have jQuery included, you'll need it.
You can also use these vanilla js click methods:
<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />
or
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);
You're trying to use JQuery to achieve this and following does the job. There used the common class "trainer-text" to hide all overlay texts to hide at the initial point. Use some css to make the text on your images. Refer the following to achieve that. https://www.w3schools.com/howto/howto_css_image_overlay.asp
/*
Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
$("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
$("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
$("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
$("#tr2").css("display", "none");
});
/*
Use the following if you need display text for click event
*/
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
.trainer-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

Using a Lazy Load inside a popover

I tried to implement a Lazy Load inside a popover.
For the lazyload, I use Echo.js (http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)
In a table, I've cells like this :
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
As you can see, in my cell, i can see a loading gif, and according to the position the thumb is loaded.
Works pretty well
Now I want to load in a popover the full size image
I want to use quite the same technique to avoid the loading of all the full size images of my page
I keep the same table/cell thing, and add in my page an hidden div including
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img src='loader.gif' data-echo='image.jpg' class='img-rounded'>
</div>
</div>
And I'm stuck here, I only see the loading gif inside the popover, not the image.jpg I should be able to see
Here is the JS I use for the popover
$(".pop").each(function() {
var $pElem= $(this);
$pElem.popover(
{
placement: 'left',
trigger: 'hover',
html : true,
title: getPopTitle($pElem.attr("id")),
content: getPopContent($pElem.attr("id"))
}
);
});
function getPopTitle(target) {
return $("#" + target + "_content > div.popTitle").html();
};
function getPopContent(target) {
return $("#" + target + "_content > div.popContent").html();
};
Do you see what's wrong or what I missed ?
This is pretty my first attempt on this subject,
so I've read the others threads about, but I couldn't find a way to reproduce the results in my configuration
Using the comment above, I just changed a bit the line related to the image.jpg
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img data-src='image.jpg' class='lazyload img-rounded'>
</div>
</div>
Now it works, thanks !
I'll try now to use lazysizes more widely to solve my problems

Selecting a div unselects the other divs like a radio button?

I have created a list of divs using a loop from the database..
when i click select..it becomes like
the problem i am facing is that at a time i can select only one company...how could i select a nother company that will make the previous selected company unselect...
the program is like this...
{section name=i loop=$id7}
<div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" >
<div id="ctable">
<table style="margin-top:20px;margin-left:18px;width:178px;height:149px;">
<tr style="text-align:center;">
<td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td>
</tr>
<tr>
<td colspan="2" align="center" valign="center" height="107px">
<img src="{$tconfig.tsite_images}{$id7[i].vImage}">
</td>
</tr>
</table>
</div>
<div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;">
Select
</div>
<div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">
<img src="{$tconfig.tsite_images}tick.png" /> <font color="#cdcdcd"><b>Company selected</b></font>
</div>
</div>
{/section}
and its javascript is like this
<script>
function selecty_hide (eid,compid) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('selected_state').style.display="block";
document.getElementById('eid').value=eid;
}
</script>
Say you have a class(selected_company) for selected company div.
When someone choose any other div then get previous selected div and remove this class then add this class in current selected div.
Something like this:
$(".selected_company").removeClass('selected_company');
$(this).addClass('selected_company');
Then at a time only one company will be selected.
Here is an example demo: http://jsfiddle.net/kRD4S/
Well little modification in javscript can be done as below
<script>
function selecty_hide (eid,compid,element) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('ctable').style.display="none";
document.getElementById('selected_state').style.display="none";
element.style.display="block";
document.getElementById('eid').value=eid;
}
need to pass another parameter during function call(3rd param) as 'this'
onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)"
The script above will first display none all the div with id selecty,ctable,selected_state and this will display block the selected div.
Hope this Help you
If you can use jquery it is easy
<div class="mydiv" style="cursor: pointer;">
box 1
</div>
<div class="mydiv" style="cursor: pointer;">
box 2
</div>
<div class="mydiv" style="cursor: pointer;">
box 3
</div>
<script type="text/javascript">
$(".mydiv").click(function() {
if($(this).hasClass("selected") == false) {
$(".mydiv").removeClass("selected");
$(this).addClass("selected");
} else {
$(".mydiv").removeClass("selected");
}
});
</script>
This will remove the class "selected" from all elements with class "mydiv" and then add it to the single element you have clicked.
It also supports unselecting the current element + you can drop your buttons completely it is enough to click on the div!
You should be able to adjust my example to your code.
All you need to do now is define a custom class for the div that will display its content different like only show "company selected" when the div has the class "selected".
Have fun and good luck!
Think of it slightly different. If Company A is selected, and the user now selects Company B:
Unselect ALL elements.
Now select Company B
If you do it like this, there's no hassle in trying to figure out which company you need to unselect.
Something like this:
$(".company").click(function() {
//remember the new item
var clickedItem = $(this);
//unselect everything
$(".company").removeClass("companySelected");
//select the company that was clicked
clickedItem.addClass("companySelected");
});
Look, its simple, you can just solve your problem this way: Adding and removing CSS Classes.
I have made a full JSFiddle here to you know what i'm talking about.
Modified the HTML Company Div to be only one and not two divs:
<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') >
Select
</div>
And modified the js:
function select_unselect(eid,compid){
alert(eid);
alert(compid);
if ($(this).hasClass('selectable_state'))
{
$(this).removeClass('selectable_state');
$(this).addClass('selected_state');
$(this).html('Company Selected');
$('#eid').val(eid);
}else{
$(this).removeClass('selected_state');
$(this).addClass('selectable_state');
$(this).html('Select');
$('#eid').val('');
}
}
Ps: please note that in the fiddle i removed some parameters of the function to make it work because i do not have all the data to make it work properly.

Jquery add class if a element exists within div

I want Jquery to add a class .pointer to .staff-container if <a href=""> exists within .staff-picture.
My Jquery:
if($('.staff-container').find('.staff-picture').closest('a').length) {
$(this).addClass('pointer');
}
No class is being added with the above jquery, what am I doing wrong?
My Css:
.pointer {
cursor:pointer !important;
}
My HTML:
<div class="teachers">
<div class="span12">
<div class="scroll transparent">
<div class="staff-outer-container">
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
Ahmed#wcskids.net</p>
</div>
</div>
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/aiello.png" />
</div>
<p><span class="bold">Mr. Aiello</span><br />
Ext. 13328<br />
Room 328/323<br />
ASusan#wcskids.net</p>
</div>
</div>
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/aiosa.png" />
</div>
<p><span class="bold">Mr. Aiosa</span><br />
Ext. 13419<br />
Room 419/323<br />
BAiosa#wcskids.net</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this :
$('.staff-picture a').closest('.staff-container').addClass('pointer');
I hope the logic is obvious from the code.
I would first iterate through the .staff-container divs, then use a conditional to determine which ones have an a tag using the this object as context:
//Goes through all the .staff-picture divs
$('.staff-container').each(function(){
//If the a tag exists within the current .staff-picture (returned object isn't undefined)
if($('a', this).html() != undefined){
//Add the class if a exists
$(this).addClass('pointer');
}
});
http://jsfiddle.net/y9ZKG/
EDIT
Sorry, I meant staff-container, not staff-picture. But, either will work.
2nd EDIT
Also, if you are curious why your original methodology wasn't working, it is because the conditional you use (the first if) does not instantiate the this object. That is, this does not exist inside your function.
Try this:
var $selector = $('.staff-container');
if($selector.find('.staff-picture').has('a')) {
$selector.addClass('pointer');
}
$.closest() traverses up not down the tree, therefore you are not finding anything. see the jQuery API
I like to approach these types of problems with "reverse" logic:
$('.staff-picture a').parent().parent().parent().addClass('pointer);
There's probably a way to "choose" your staff-container parent, but if the DOM structure doesn't change, this works great.
This starts by selecting all the a-links and then ONLY applies those up which uses jQuery's powerful selection code. It doesn't rely on tests with if-statements.

Categories