On click event only fires once, why? - javascript

I've been having this problem for the past week but I just skipped it for this time.
So this is my jQuery code:
jQuery(function ($) {
$(function () {
$('.mPicture').on('click', function (e) {
e.preventDefault();
$(this).find('div').bPopup();
});
});
});
I have seen that people needed to use .live for getting it to work multiple times but that doesn't do anything with this code.
This code is connected to a div which isn't visible until an image is clicked.
So what my question is: Why doesn't this work and what do I need to change?
HTML:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat"/>
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
If any other information is needed, feel free to ask.

I think i have found the issue
$(this).find('div').bPopup();
is changing the html structure while rendering and its not reverting back to its original position.
From:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: none;">
<div class="Merk">
<table id="tbLogo">
<tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat" />
<div class="logoPopup" style="width: 700px; border: solid; border-color: white; border-width: 5px; border-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: 0 0 10px gray;">
<img src="logo's/AS.png" class="merkThumbnail" />
Put your text here
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
to:
<div id="product_tabs_new_contents" class="product-tabs-content" style="display: block;">
<div class="Merk">
<table id="tbLogo">
<tbody><tr>
<td>
<div id="AS" class="mPicture">
<img src="logo's/AS.png" id="mPicId" class="mPicMaat">
// Removed from here
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
// and added here
<div class="logoPopup" style="width: 700px; border: 5px solid white; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: white; padding: 25px; font-size: 25px; box-shadow: gray 0px 0px 10px; left: -115.5px; position: absolute; top: 127px; z-index: 9999; opacity: 0; display: none;">
<img src="logo's/AS.png" class="merkThumbnail">
Put your text here
</div>

you should bind 'click' event on parent div, because as you said that the div isn't visible until an image is clicked: You cannot bind an eventListenner on any element if it was not exist. in this case, the code is look like:
$('#tbLogo').on('click', '#test', callbackFunction)
or
$('#tbLogo').on('click', '.mPicture', callbackFunction)
reference document by #errand :
http://learn.jquery.com/events/event-delegation/

Related

Element does not expand on click

I'm kind of a newbie coder and I'm having a bit of trouble.
I want to make an element expand when I click a line of text, but it simply is just not expanding and I'm not sure what I'm doing wrong.
For reference, this is the site or info card I'm working on.
The text that says "click me" is what I'm trying to make expand said element.
I would really appreciate any help or advice on how to fix this.
$(".expander").click(function() {
if ($(this).hasClass("expander")) {
$(this).removeClass("expander");
} else {
$(this).addClass("expander");
}
});
.expander {
height: 3em;
overflow: hidden;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="box-shadow: 2px 2px 4px #242424; background-color: rgba(33, 33, 31, 2); border-top: double #831407 0px; border-left: double #831407 0px; padding: 10px; width: 159px; overflow:auto; position:relative; center: 20px; top: 20px;">
<font face="times new roman" color="#831407" size="1">
<div align="center" style="text-shadow: 0px 0px 0px #831407, 0px 0px 0px #3C4595;">
<font size="2px"><img src="https://yokai.crd.co/assets/images/gallery03/4246c620.gif?v=b4df531c" style="width:15px;height:15px"> <b>mikey</b> <img src="https://yokai.crd.co/assets/images/gallery03/58ed5769.gif?v=b4df531c" style="width:15px;height:15px"></font>
<font face="times new roman" color="#831407" size="1"><br><b>they</b> | <b>adult</b> | <b>isfp</b></font>
<br>
</div>
</div>
<div class="expander">click me
You can also use .slideToggle() method of jquery.
Here is an example :
$(".expander").click(function () {
$(this).next(".expanded").slideToggle();
//open up the expanded- toggle the slide- if visible, slide up, if not slidedown.
});
.expanded{
height: 100px;
background : green;
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expander"><button>click to expand</button></div>
<div class="expanded"></div>

Content of horizontal scroll div is cut

I am inserting into my HTML using javascript. My code is being truncated/ cut off.
Here's my code:
function feedbackDiv(feedback_id, feedback_title, feedback_content, feedback_author) {
return querySnapshot.forEach(function(doc) {
const data = doc.data();
var feedback_title = data.title;
var feedback_content = data.content;
var feedback_author = data.author;
document.getElementById("küchen_feedback_p").insertAdjacentHTML('beforeend', feedbackDiv(doc.id, feedback_title, feedback_content, feedback_author));
});
};
.küchen_co {
padding: 20px;
}
.küchen_feedback_p {
overflow-x: auto;
}
.feedback_container {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #212121;
color: #ffffff;
text-align: center;
}
.feedback_container:hover {
border: 1px solid #7ef6a9;
animation: color_change 1s;
background-color: #7ef6a9;
color: #212121;
}
<div class="küchen_co center">
<div class="küchen_feedback_p center" id="küchen_feedback_p" style="display: none;">
</div>
<div class="noDataContainer_kfeedback_p" id="noDataContainer_kfeedback_p" style="text-align:center;">
<img src="./broken_heart.png" width="80px" height="auto" />
<p class="nothing_found_k küchenH">Es wurden derzeit keine Feedbacks abgesendet.</p>
</div>
</div>
<div class="feedback_container" id="feedbackDiv" style="width:300px; height: 250px; margin-right: 20px;">
<p id="feedback_id" style="display: none;">${feedback_id}</p>
<h1 class="" style="word-wrap: break-word;">${feedback_title}</h1>
<p class="" style="word-wrap: break-word;">${feedback_content}</p>
<p class="" id="feedback_author" style="display: none;">${feedback_author}</p>
</div>
But the content of the scrolling div is cutted: https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0
~filip
For all with further issues. The problem might be the following lines of code:
justify-content: center;
align-items:center;
text-align:center;

Multiple drag & drop buttons and target DIVs with HTML5

I have a couple of buttons, which stand for available webservices in form of maps or graphs. The user would be able to drag the buttons in different DIVs of various sizes on the screen, in order to compose for himself a context on the GUI which fits his needs.
I am not very familiar with the drag-and-drop functionalities of HTML5 and jQuery. I have set up an example, which works fine for a single button and single DIV. But working with multiple buttons and multiple DIVs, I wonder if that workflow of mine is the right one.
I have set up a Fiddle here. The first button can be dragged to the first DIV, and an image (just a placeholder) appears. The others don't work yet.
As the DIVs and Buttons are called by IDs, I could now just have four different IDs for the buttons and four different IDs for the DIVs. But that would that mean that I have to write four times the same javascript code, with the different IDs hard-coded into it? I guess there is a more flexible solution to this, no? Especially, as the target DIVs must stay flexible...
I wonder too how I can avoid of having the button disappear, once it is being dragged. I would rather want to make it grey or so.
Thanks for any hints!
The GUI would look like this:
For the buttons, I have this:
<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
For the javascript part:
function onDragOver(e) {
e.preventDefault();
e.target.className = "over-me";
}
function onDragLeave(e) {
e.target.className = "static";
}
function onDragStart(e) {
e.target.innerHTML = "<h4>You are Dragging me</h4>";
document.getElementById('dropzone1').className = 'drop-into-me'
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
document.getElementById('dropzone1').className = 'static'
if (e.target.parentElement.id === "dropzone1") {
e.target.innerHTML = "<img src='http://ede.grid.unep.ch/images/logo_geo.gif'>";
}
}
function onDrop(e) {
e.preventDefault();
var draggableDiv = document.getElementById("a-draggable-div");
draggableDiv.setAttribute("draggable", "false");
e.target.appendChild(draggableDiv);
}
For the CSS:
#dropzone1, #dropzone2, #dropzone3 {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}
Here is a solution for which you need not to use id You can have as many number of buttons and corresponding number of divs to drop in.
Have given ids to divs where you will be dropping the buttons just to show in which div the button have been dropped in.
Here is the updated Fiddle.
//just to know which button is being dragged we will use this variable
var draggingDiv;
function onDragOver(e) {
e.preventDefault();
e.target.classList.add("over-me");
}
function onDragLeave(e) {
e.target.classList.add("static");
e.target.classList.remove("over-me");
}
function onDragStart(e) {
draggingDiv=e.target;
e.target.innerHTML = "<h4>You are Dragging me</h4>";
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
e.target.parentElement.classList.add("static");
draggingDiv.innerHTML="<h4>Dragged once Can't drag me now:)</h4>";
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>";
}
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
//uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
//draggingDiv.draggable=false;
//e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
}
.dropzone {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}
<div draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
Hope it helps :)

Internet Explorer CSS display block issue

I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here

Correct element.getElementsByTagName() implementation

//EDIT My issue was related to something else, I thought the implementation was incorrect but it actually works, thanks for the confirmation.
Looked in jQuery and prototypejs, can't seem to find the way they implement getElementsByTagName on a element (not document.getElementsByTagName).
Here's my test html:
<div id="something" style="margin: 10px 10px 10px 15px; overflow: auto; position: relative; height: 200px;">
<div style="float: left; width: 180px; font-size: 10px; margin-bottom: 4px;">
<label for="label_50">
<img style="vertical-align: middle; margin-right: 3px;" src="http://web1.wow.com/i/i_ask_sm.gif"/>
<a style="color: rgb(0, 0, 0); text-decoration: underline;" href="http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=[URL]&title=[TITLE]" post_link="http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=[URL]&title=[TITLE]" rel="external" target="_blank">Ask</a>
</label>
</div>
</div>
And my current js:
document.getElementById("something").getElementsByTagName("a");
I'm looking for the correct implementation of this because of course IE doesn't seem to work correctly with it, and I can't use a framework.
<div id="something" style="margin: 10px 10px 10px 15px; overflow: auto; position: relative; height: 200px;">
<div style="float: left; width: 180px; font-size: 10px; margin-bottom: 4px;">
<label for="label_50">
<img style="vertical-align: middle; margin-right: 3px;" src="http://web1.wow.com/i/i_ask_sm.gif"/>
<a style="color: rgb(0, 0, 0); text-decoration: underline;" href="http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=[URL]&title=[TITLE]" post_link="http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=[URL]&title=[TITLE]" rel="external" target="_blank">Ask</a>
</label>
</div>
</div>
<pre>
<script type="text/javascript">
var lnks = document.getElementById("something").getElementsByTagName("a");
for (var ii = 0; ii < lnks.length; ++ii) {
document.writeln(lnks[ii].href);
}
</script>
</pre>
In IE6, IE7 and IE8RC1 this outputs:
http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=[URL]&title=[TITLE]
Does your example not actually demonstrate the problem?

Categories