I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');
If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/
Related
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>
<td class="GNEB1S-HKB" valign="middle">
<div style="white-space: normal;line-height:1.2;font-size:10px;width:100px; color:#969696;" id="DOM_110">
<div title="15 of 212 items were loaded. Click to load all items.">212 found<br>
<span style="text-decoration:underline;cursor:pointer" onclick="return handleEvent(event,'com.polarion.alm.tracker.web.js.internal.TrackerNew68/com.polarion.reina.web.js.widgets.HTMLComposite69/com.polarion.reina.web.js.widgets.HTMLContainer70/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree71/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree$3375/com.polarion.reina.web.js.widgets.HTMLComposite376/com.polarion.reina.web.js.widgets.HTMLContainer377/com.polarion.reina.web.js.widgets.HTMLSplitPane382/com.polarion.reina.web.js.widgets.HTMLSplitPane378/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTreeAndQP225/com.polarion.reina.web.js.widgets.HTMLComposite227/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTree217','click1913',false)">Load all</span>
</div>
</div>
</td>
For a webpage I have the above as an element. The text at the end of the element Load all is Clickable. Using JQuery or JavaScript I want to click on that Load All.
How can this be done?
You can do it like this:
<span class="loader-class">....</span>
in jQuery:
$(".GNEB1S-HKB span").trigger("click", function(evnt){
//handle the click if needed here
console.log("I have been clicked!!");
});
OR if you can manage to add a class to the span element, like this,
$(".loader-class").trigger("click", function(evnt){
//handle the click if needed here
console.log("I have been clicked!!");
});
well ... in javascript you should do this ...
but i don't know what your 'handleEvent' function does ...
anyway ... here's the code
<td class="GNEB1S-HKB" valign="middle">
<div style="white-space: normal;line-height:1.2;font-size:10px;width:100px; color:#969696;" id="DOM_110">
<div title="15 of 212 items were loaded. Click to load all items.">212 found<br>
<span id="loader" style="text-decoration:underline;cursor:pointer" onclick="return handleEvent(event,'com.polarion.alm.tracker.web.js.internal.TrackerNew68/com.polarion.reina.web.js.widgets.HTMLComposite69/com.polarion.reina.web.js.widgets.HTMLContainer70/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree71/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree$3375/com.polarion.reina.web.js.widgets.HTMLComposite376/com.polarion.reina.web.js.widgets.HTMLContainer377/com.polarion.reina.web.js.widgets.HTMLSplitPane382/com.polarion.reina.web.js.widgets.HTMLSplitPane378/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTreeAndQP225/com.polarion.reina.web.js.widgets.HTMLComposite227/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTree217','click1913',false)">Load all</span>
</div>
</div>
</td>
<script>
var myspan=document.getElementById("loader");
myspan.click();
</script>
I have this html table with contents, sub-contents and sub-sub-content, I want to hide all sub-content "inside" the content I'm clicking on.
<table>
<tr class='content'>
<td>Things and things...</td>
<tr class='sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
...
</table>
I'm trying to do this with jQuery, but I can't get it right. Actually I'm hiding all sub and sub-sub after the clicked content, but I want to hide only sub/sub-sub from clicked content to next content.
$('.content').on('click', function() {
var element = $(this).next('.content');
$(this).nextUntil(element, '.sub-content').toggle();
$(this).nextUntil(element, '.sub-sub-content').toggle();
});
I don't get what I'm missing here.
I think you may be overcomplicating it slightly... Try this instead:
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/KNED6/2/
For me the best way is FIddle
<script type="text/javascript">
$(document).ready(function(){
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
})
</script>
I'm trying to create dynamically generated tooltip/popover content for a site using bootstrap (3.1), flask and python.
I have hyper-linked items in a table. When I mouse over those hyperlinks, I want a tooltip to appear; when the user clicks on the hyperlink I want them to go to the individual item page. Code (shortened for brevity):
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% include 'itemlink.html' %}</td>
<td>12</td>
<td>red</td>
</tbody>
</table>
then in itemlink.html:
<a href="{{linkitem.get_url()}}" class="itemlink" data-item-id="{{linkitem.id}}">
<img src="{{linkitem.image}}" alt="Item {{linkitem.id}}" class="smallicon" />
{{linkitem|safe}}
</a>
Next: the content of what I want to be in the popover/tooltip box:
<div id="item_{{boxitem.id}}" class="itembox">
<div class="itemimage">
<img src="{{boxitem.image}}" alt="{{boxitem.name}}" title="{{boxitem.get_title()}}" />
</div>
<div class="iteminfo">
<div class="itemtitle">
{{boxitem.get_title()}}
</div>
<div class="itemdesc">
{% autoescape off %}{{boxitem.get_desc()}}{% endautoescape %}
</div>
</div>
</div>
I put this in a script on my page:
<script>
$(document).ready(function(){
$('#item_{{item.id}}').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});
</script>
I'm wondering if this part of the script is even possible?
$('#item_{{item.id}}').popover({
EDIT TO ADD: (it's not, it threw a server error)
EDIT again: It had to be
$('.itembox#item_'+$(this).data(itemID')).popover
On what element should I add the rel=popover?
I would give each item a static class like tool tip or give the table an id and use jQuery selector on the element in the table for the hover event.
$(document).ready(function(){
$('td.tooltip').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});
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.