It seems my class is not working in my JS code. I have attempted a few ways so I'll show you what I have done.
<h2 id="firstbutton" class="firstbutton" type="button">Let's go!</h2>
This method let me style, but a button was definitely not visible.
My other way was replacing this with a "button" tag, but this did not let me style the button although I used the class.
<button id="firstbutton" class="firstbutton"> Let's go!</button>.
This way actually gives me a button, but it was tiny and was not very helpful. Remember in my CSS code I used both of the two methods:
.firstbutton {text-align: center;}
And my second one:
#firstbutton {text-align: center;}
I hope I gave enough information as reference and this question does not closed. I am trying to think of another way.... renaming perhaps?
Thank you very much!!
Your code is generally correct, cut there are several things you need to consider.
If the parent tag of your <h2> is <body> tag, then this .firstbutton {text-align: center;} code will work.
But if the parent tag of your <h2> is not <body> tag, you have to align the parent to the center. Example:
if the parent code is <div>, like this:
<div>
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
you have to make it like this:
<div align="center">
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
Or if you want to use CSS, you can read this great article.
Let me know if this helpful
You can make a button in two ways: using <input type="button" value="Content!"> and <button>Content!</button>.
Styling the buttons using classes and ids as you are doing works as normal.
However, if you are trying to center-align the button, you have to put the styling on the parent element, like so:
.parent {
text-align: center;
}
input, button {
color: red;
}
<div class="parent">
<input type="button" value="Content!">
<button>Content!</button>
</div>
Related
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.
So this is what I have right now
http://jsfiddle.net/Wpn94/1755/
The first part of the javascript is just calling in the jQuery lib. Since I don't have acces to the original files I use a custom css, js plugin (mind this all in done in wordpress).
In the fiddle if you click on one the the 'meer' it only opens the one you've clicked. If you press 'minder'it nicely closes the one you've clicked.
Now to the issue, on my testing area if I click one of these buttons the other 5 open as well, which ofcource is not the intended use.
Is there any solution which could fix this? I'mn not able to link to the testing enviroment since it's about a product which isn't released yet, so sadly I do not have permissions to do so.
Possibly the issue:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
or
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
I think the issue is in one of those two. Since I look for the wrapper class which all the 'buttons'have in common.
Any help would be greatly appreciated.
(structure of the element on the test area)
<div class="column withimage ">
<div class="column-inner">
<div class="image" style="background-image: url(http://eperium.com.testbyte.nl/wp-content/uploads/2016/08/Icoon_orientatie_v02.png)"></div>
<div class="txtwrap"><h4><center>ORIËNTATIE</center></h4>
<div class="wrapper">
<div class="small">
<p style="text-align: center;">
<span style="color: #000000; font-size: 16pt;">title</span><br>
<span style="color: #000000; font-size: 12pt;">text<br>more text week. </span></p>
</div>
<p style="text-align: center;"><a class="btn" href="#">Meer informatie</a></p>
</div>
What are you doing inside this function ?
$('.wrapper').find('a[href="#"]').on('click', function (e) {
You need to toogle your class on $(this) element, not to select all element with jquery again.
As closest doesn't seem to be reliable (maybe only in your test area) it is worth a try to navigate to the desired element with .parent()
$(this).parent().parent().find('.small, .big').toggleClass('small big');
If anyone is interested in the differences:
Difference between jQuery parent(), parents() and closest() functions.
According to this, closest should actually work but parent seems to be the saver way.
You can use Jquery's findByClass.
$('.className')
This will find all the elements use className.
So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.
I have a div in my php page that uses jQuery to hide it once the page has loaded. But is there a way to hide it from the very start of loadup?
The reason I ask is because for a brief second, you can see the div when the page is loading, and then hides when the page is fully loaded.
It looks unprofessional.
Just wondering if there is a way around this?
Thanks
Use css style to hide the div.
#selector { display: none; }
or Use it like below,
CSS:
.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
and in jQuery
$(function () {
$('#blah').removeClass('hidden');
});
I've had the same problem.
Use CSS to hide is not the best solution, because sometimes you want users without JS can see the div..
The cleanest solution is to hide the div with JQuery. But the div is visible about 0.5 seconde, which is problematic if the div is on the top of the page.
In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
Of course, you can still add all the effects you want on the div, JQuery toggle() for example.
And you will get the best behaviour possible (imho) :
for non JS users, the div is visible directly
for JS users, the div is hidden and has toggle effect.
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
In this case I would recommend the CSS solution by Vega. But if you need something more complex (like an animation) you can use this approach.
This has some complications (see comments below). If you want this piece of script to really run as fast as possible you can't use jQuery, use native JS only and defer loading of all other scripts.
Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.
This method I've used a lot, not sure if it is a very good way but it works fine for my needs.
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
or having the js just after the div might be fast enough too, but not as clean
I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/
Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.