I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
Related
I have a question, which I can't ask directly, but will try to explain as much as I can, so you can help me.
The thing is next: I am making a project about some football league, and I have a sidebar which lists rounds of the competitions like this
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
It's nothing much, as I am trying to keep it simple. I will make those clickable, but I don't want them to lead me to another page, I want them just to change the part of the main container of the page.
Something just like on http://www.flashscore.com. When you click to change date, the url stays flashscore.com, but the page changes to the date that you clicked.
I know this all sounds crazy, but if you understand me, I will explain even further with whatever you need me to.
Also, I am fairly new to Javascript, but will try to incorporate it into the website I am making, as I think this is pure javascript.
Look into AJAX, that is what you will want to do in order to grab new info from a server without doing a full page postback / reload. It will be mostly JS with maybe some CSS to show / hide content. I'm on mobile so I can't give a great demo, but I'll try when I get off work.
EDIT: looks like I thought you were asking about loading new data. Should be easier than that if you just want to change content to display. I'll post more details later
Update: relevant fiddle: https://jsfiddle.net/44ka1be6/
html
<div class="wrapper">
<div class="sidebar">
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
<div>
Stuff 3
</div>
</div>
<div id="content">
Default stuff
</div>
</div>
js
$(document).ready(function() {
$('.sidebar div').click(function(e) {
$('#content').text($(this).text())
})
})
css
.sidebar, #content {
display: inline-block;
}
.sidebar div {
border: 1px solid black;
font-size: 18px;
padding: 8px 5px;
}
.wrapper {
border: 1px solid black;
}
It is very hard to answer without details, but you can make the main body of the page in an element (div for example) and write to the innerHTML when they click on a link. Depending on what you want to go in the main body, you can have it all as strings in JS, or preferably load the data through AJAX. See: https://www.w3schools.com/xml/ajax_intro.asp. They have a lot of good example code.
In case you just want to update your container with a new static content, you can just add a click event listener to your sidebar:
sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
container.innerHTML = "New content";
});
#sidebar {
float: left;
}
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
<div id="container">Content</div>
I'm trying to create a basic accordion pull down button, one that will display my information when clicked and then hide it when clicked again. I'm using html, css and js to accomplish this.
Based on an example from my prof, I have the following in js:
$('input[type=radio]+label').click(function(){
var lbl = $(this).html().substring(2);
var on = $(this).prev().attr('checked');
if(on){
$(this).html('▹ '+lbl);
}else{
$(this).html('▿ '+lbl);
}
$(this).prev().attr('checked',!on);
$(this).next().slideToggle();
});
the following css:
#work,
.closed {
display: none;
}
#work+label,
{
cursor: pointer;
color: blue;
}
section {
background-color: #eee;
padding: 20px;
margin-left:15px;
}
and the following in html:
<div class="text">
<input type="radio" id="work">
<label for"work">
<h3 class="work-text">OVERVIEW</h3>
</label>
<section class="closed">
<h3>
OVERVIEW:
</h3>
<p>
Highly creative electronic design and multimedia student with a passion and enthusiasm for Illustration and character design. Graphic artist skilled in a variety of design and logos.
</p>
</section>
</div>
Can someone help me figure out how to get rid of the ▹ and ▿? I don't want the arrows to be present when you click on the word OVERVIEW. I simply want to be able to click on the word, have the context pull down and then disappear when clicked again.
I've tried just removing the two from the code and replacing it with:
if(on){
$(this).html(' '+lbl);
}else{
$(this).html(' '+lbl);
}
and that seemed to work, but when I click on it more than a few times, I get the following type in place of my accordion pull down:
"h3 class="work-text">OVERVIEW"
How can I fix this problem?
Why don't you just remove the logic for showing the arrows entirely? Demo
$('input[type=radio]+label').click(function() {
$(this).next().slideToggle();
});
I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!
A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.
I know multiple post have already been posted on the similar topic, but I am yet to find a good answer on this. So, asking Gurus to help me out.
I am working on an application where I am working on JavaScript, and JSF. On page load I am calling multiple external javascript/jquery files (for multiple purposes) and they seems to work fine. However, there are couple of pages where I have some components (JSF components) that does not load initially or does not become part of the initial DOM (when page loads). However, when it load after some click event on the page (so i said content is loaded on the fly), then the new content does not get the javaScript/jquery effect.
Here's a brief example just to make my question more simple:
I have this on the page header :
.. and this on the body
<div class="panel">
<p>some sample text</p>
<p class="button">Modify</p>
</div>
(On the above code output,i get round shaped buttons for "Modify" text)
When someone clicks the modify button(link), then gets the following codes:
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
However, I do not get same rounded shape buttons anymore for "Yes" and "No". (And calling JQuery files on the bottom of the page doesn't help either).
Through JSF we are using:
<h:panelGroup render=.....>
<div class="panel">
<p>some sample text</p>
<p class="button">Modify</p>
</div>
</h:panelGroup>
<h:panelGroup render=.....>
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
</h:panelGroup>
So when the first panelGroup (JSF) gets loaded it gets what's on the header and load the javaScript and displays the buttons with the curveycorner, but when the second panel is loaded, it does not get the javascript.
One solution I have is the following:
<h:panelGroup render=.....>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
</h:panelGroup>
It works, but checking if there's a better option since we want to avoid calling the same javaScript file multiple times.
Added the followings after I got some comments from others -
Actually i was wrong. Curvy corner plugin is a stand alone and does not need any other javascript/jquery file except for "curvycorners.js" . Just incase if you guys stlil have doubt about it (or about my javascript knowledge), just try the following code and see how 'curvy corner" works (please download the "curvycorners.js" from http://www.curvycorners.net/ or anywhere else ..and then try my code , it's small and simple --------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* styles for the demo sub-pages */
#demo-btn {margin: 0.5in auto;border: 0px solid #fff;color: #fff; padding:5px 15px; text-align: center; background-color: #006354;
border: 1px solid #ccc; background-image: url(btn_middle_brnd.png); background-repeat: repeat-x; border-radius:10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; height:15px; width:80px; font-size:11px; font-weight:bold;}
#demo-btn a{color:#fff; text-decoration:none;}
</style>
<script type="text/javascript" src="../curvycorners.src.js"> </script>
</head>
<body>
<div id="demo-btn">
<span>Cancel</span>
</div>
</body>
</html>
I would use the complete event of the load or ajax method to apply the curvycorners plugin to elements that don't have it but need it.
$(el).load("url",function(){
$(el).find('selector').corner();
});
Added explanation:
You didn't give us any JavaScript to look at, so all we can do is assume.
The corner plugin needs a particular piece of code to apply it to elements.
$(selector).corner();
In order for it to apply to an element, the element has to exist on the page when that piece of code is ran. Since you are loading the elements in with ajax, you will need to run that code again every time you run an ajax call so that it will apply to the new elements.
This is hard to dissect without seeing the jquery files, but my guess you aren't using delegates for components that aren't loaded when the page first loads. Check out here:
http://api.jquery.com/delegate/