OnClick event handler in DIVs (First OnClick affects all DIVs) - javascript

Basically I have three DIVs, and each DIV has an OnClick event handler inline. These OnClick events direct the user to whatever page the DIV is talking about specifically. This works, however, once all three DIVs have been coded with their onclick event, and separate URLs, the top most onclick event directs all three DIVs to the first URL. If I delete the code from the top most DIV, the second DIV directs to the second DIVs correct page, but the third DIV will direct to that page as well.
<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
<div class="column_one_image"></div>
<div class="white" class="row1"><h1> General Contractor </h1>
<p class="left"></p><br><a href="/general-trades-contractor.php"><span>more...</span>
<div class="column_two" style="margin-top:25px;" onclick="location.href='/specialty-contractor.php';">
<div class="column_two_image"></div>
<div class="white" class="row1"><h1 style="padding-left:20px;"> Specialty Contractor </h1>
<p class="right"></p><br><span style="padding-left:20px;">more...</span>
<div class="column_three" style="margin-top:25px;" onclick="location.href='/firestop-contractor.php';">
<div class="column_three_image"></div>
<div class="white" class="row1"><h1> Firestopping Contractor </h1>
<p class="left"></p><br><span>more...</span>
As well as the relevant CSS.
.column_one
{
display:block;
float:left;
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;
}
.column_two
{
display:block;
float:left;
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;
}
.column_three
{
display:block;
float:left;
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;
}

Your html is malformed, you are missing a closing </div> tag for each of your divs and a closing </a> tag for the second link.
if you run the html through a beautifier its easier to see:
<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
<a href="/general-trades-contractor.php">
<div class="column_one_image"></div>
</a>
<div class="white" class="row1">
<h1>General Contractor</h1>
<p class="left"></p>
<br>
<a href="/general-trades-contractor.php">
<span>more...</span>
</div>
<div class="column_two" style="margin-top:25px;" onclick="location.href='/specialty-contractor.php';">
<a href="/specialty-contractor.php">
<div class="column_two_image"></div>
</a>
<div class="white" class="row1">
<h1 style="padding-left:20px;">Specialty Contractor</h1>
<p class="right"></p>
<br>
<a href="/specialty-contractor.php">
<span style="padding-left:20px;">more...</span>
</a>
</div>
<div class="column_three" style="margin-top:25px;" onclick="location.href='/firestop-contractor.php';">
<a href="/firestop-contractor.php">
<div class="column_three_image"></div>
</a>
<div class="white" class="row1">
<h1>Firestopping Contractor</h1>
<p class="left"></p>
<br>
<a href="/firestop-contractor.php">
<span>more...</span>
</a>
</div>

You seem to be missing closing tags. Something like this:
<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
<div class="column_one_image"></div>
<div class="white" class="row1">
<h1> General Contractor </h1>
<p class="left"></p><br><span>more...</span>
</div>
</div>
Should work. You were missing the last </a></div></div> and because of this every subsequent div was the child of the div above, thus the first div included second two, and second was the parent of third. So when you click the div, you actually trigger it's parent click.
Of course, you need to repeat this three times, for each <div> add </a></div></div> to close the elements.

Related

How can i click and just own class can be shown on Javascript

<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
$(".class1").hide();
$(".item").click(function () {
$(".class1").show();
})
I want that when the user click div of item, its own class1 should be show();
But in my codes, when the user click item of div, all class1 shows.
How can i do that just own class can be shown?
To fix this you need to use DOM traversal to access the .class1 element(s) within the clicked .item. To do that you can use the this keyword within the event handler to access the element which raised the event. Try this:
$(".item").click(function() {
$(this).find(".class1").show();
})
.class1 { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item text-center">
Foo
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
Bar
<div class="class1">
<p> Something </p>
</div>
</div>
Note in the example that I used CSS to hide the .class1 elements instead of JS. This is because JS runs after the DOM has loaded, so can result in elements being visible for a short time before they are hidden. CSS runs before this, so avoids that occurrence.
$(".class1").hide();
$(".item").click(function () {
$(this).find(".class1").show();
});
<!--The parent divs should not be empty, otherwise when later in the code you call the .hide () method on their respective child divs, there would be nothing left to click on-->
<div class="item text-center">
item1
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
item2
<div class="class1">
<p> Something </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use the find () method, the find () method returns the descendant elements of the selected element. Like the code above

Javascript Function parameter to target html ID and add CSS Class

I am trying to display a gallery of coaches on a webpage by displaying images with a name. I would like to enable a popup window onClick that will display more information for each coach by toggling the CSS class .-enable {} by targeting specific container divs using their associated ID's. I setup the html so a popup window appears with a "close" button by toggling the css class .enable on that specific container.
I thought to use a really simple function with a parameter to select the id, then toggle a class on the id. In my example, everything wrapped within the first tag is visible by default, and the following div is activated by toggling the css class .-enable. My example "Chris" is a coach and by clicking on the default container block, I activate function "coachWindow(coach)" and pass "Chris" as a parameter in the function to select the div with ID "chris" and toggle the CSS class.
function coachWindow ( coach ) {
document.querySelector("#" + coach).classList.toggle("-enable");
}
.-enable {
display:block;
}
<a onclick="coachWindow(chris)"><div>
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h3 class="coach-name">Chris</h3>
</div>
</div>
</div>
</a>
<div id="chris" class="coach"> <!--(-enable class appears here)-->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h3 class="coach-heading">Chris</h3>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>
Text block on this coach.
</p>
</div>
<button onclick="coachWindow(chris)" class="coach-button">Close</button>
</div>
</div>
</div>
I wasn't sure about the querySelector options, but I saw an example with jQuery that looked like $('#' + parameter) capable of targeting parameter ID's
When I run document.querySelector(chris).classList.toggle("-enable"); from the console, the popup box appears, however running the same id through function coachWindow returns undefined and typeError results.
How can I write my function so I can pass through any coach ID and display the popup window for that corresponding coach?
This is much simpler than you think. First, don't focus on ids as this will make for a more complex and brittle solution. If you structure your HTML correctly, it's just a matter of showing or hiding the appropriate div by locating it with the DOM .closest() and .nextElementSibling() methods and then adding and removing a pre-set class with .classList.add and .classList.Remove. With this approach, it doesn't matter what the ids are (you don't even need to use them) and you can add/remove coaches at any time without having to modify the JavaScript. Just keep the correct HTML structure.
Also, don't use <a> elements just as a click event trigger. Only use them when you are navigating, otherwise it's semantically incorrect. Just about any visible element can have a click event set up on it as you'll see below. Along the same lines, you can style anything to look like anything, so even non-link elements can look like links or buttons or whatever.
Speaking of semantics, don't use headings (h1...h6) because of how they make the text look. In fact, never use any HTML element because of the built-in styling that comes with it. Use the right tag to describe your content and use CSS to style the elements later. An h3 should only ever be used to describe content that is at a third sub-level in a hierarchy. That means that they should only ever appear as children of an h2 and that h2 needs to be in an h1.
// Get all the "links" into an array
let links = Array.prototype.slice.call(document.querySelectorAll("h1.coach-name"));
// Loop over the array of links
links.forEach(function(link){
// Set up a click event handler for each link
link.addEventListener("click", function(){
// Locate the outermost div of the clicked element and
// remove the hidden class from the following element
link.closest(".enlarge").nextElementSibling.classList.remove("hidden");
});
});
// Get all the close buttons into an array
let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".coach-button"));
// Loop through all the close buttons
closeButtons.forEach(function(btn){
// Set up a click event handler for each
btn.addEventListener("click", function(){
// Locate the nearest ancestor div that holds the popup
// and add back the hidden class to hide the current popup
btn.closest(".coach").classList.add("hidden");
});
});
.coach {
border:6px double #e0e0e0;
padding:5px; position:absolute;
top:25px; left:25px;
background-color:#55f;
color:#ff0;
padding:10px;
border-radius:3px;
}
.enlarge h1, .coach h1 {
font-size:1em;
margin-top:.5em;
padding:3px;
text-align:center;
}
.enlarge h1 {
border:1px solid #808080;
background-color:#e0e0e0;
display:inline-block;
border-radius:2px;
width:75px;
cursor:pointer;
}
.enlarge h1:hover { box-shadow:0 0 1px #606060; }
/* This will be set on the popups by default
and then removed as needed. */
.hidden { display:none; }
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Chris</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden"> <!-- each popup is hidden by default via CSS -->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Chris</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Mary</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Mary</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Steve</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Steve</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Alice</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Alice</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
I think your code is not complete, since i cannot see the css style that makes your div hidden. i assume it is something like this:
.coach {
display:none;
/* more styling... */
}
This happens because of CSS priorities. When the DOM experiences changes and the element is rendered again, it takes both CSS classes and process them. But, since both classes (what you define for coach and -enable) are together and both try to set display to different values, the rule that is at last is processed.
So, in order to fix this, you need to order your CSS rules in the following way:
.coach {
display:none;
}
.-enable {
display:block;
}
That way, if -enable is present, it will be the last style applied after applying .coach.
There are more rules about this, for instance, if you're applying CSS styles based on ID or element name, there are different priority rules. You can read more here

How to ignore javascript until button is click, then run

I have been adding ticket sales to our home page but it has dramatically slowed down the site. We have about 1250 shows for this season and even though adding this to the home page sales has gone up but people are complaining about the speed.
Currently I'm using the javascript:showhide to hold the ticket purchase information in a hidden div that shows when you click buy tickets.
I would like to have it NOT run anything in the hidden div unless the buy tickets button is click. Then it would pull the ticketing information and populate the div.
We will have about 300 of the ticketing scripts on the page at one time like Show1-Oct, Show2-Oct, Show3-Oct, Show1-Nov, Show2-Nov, Show3-Nov and so on.
Any ideas or help is greatly appreciated.
<div class='topShow bg-Show-Main'>
<a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
<p class='title'>Show1</p>
<p>Opens October 30th</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
</div>
<div id="Show1-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
</div>
<div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
<a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
<p class='title'>Show2</p>
<p>Opens October 31st</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
</div>
<div id="Show2-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
</div>
<div class='clear'></div>
</div>
Loading up a separate javascript file for each element on the page is a really bad idea.
A more sane design would be to have a single script that makes an ajax call for the necessary data for each listing when needed (when the user clicks that 'buy tickets' button) and injects it into the page. Something along these lines: (some extraneous HTML removed from your sample code, but you'll get the idea)
$('.btn2').on("click", function() {
var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible
console.log("Get data for ", myId);
$.get("/whatever?id=" + myId, function(response) {
// assuming that ajax call returns html, just inject it into the div:
$('#" + myId').html(response);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topShow bg-Show-Main'>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show1-Oct">
</div>
<div class='clear'></div>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show2-Oct">
</div>
<div class='clear'></div>
</div>

<a> element not working properly when hiding parent?

I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});
The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.
Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>

Categories