I've been looking around, but I can't seem to find exactly what I'm looking for. I want to include both my jQuery and CSS into one .html page, but I cant seem to get the jQuery working. I'm not new to coding, but I am new to jQuery. Here's what I have so far:
http://jsfiddle.net/b63nLkfa/1/
<div class=aboutMe>aboutMe</div>
<style>
.bodyAmendment{
width:100px;
}
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
$(document).ready(function() {
$('.aboutMe').click(function() {
$(this).toggleClass('bodyAmendment');
});
});
</script>
Obviously, I want to toggle classes when clicked (simply change the width of the div).
You didn't select jquery from jsfiddle sidebar. And remove
<script src="jquery-1.11.2.js"></script>
or use
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Here is the new link.
Both aboutMe and bodyAmendment have a width defined. toggleClass() appends the class, so you wind up with <div class="aboutMe bodyAmendment">. width: 200px "wins" so it appears the code is doing nothing. Try
.bodyAmendment{
width: 100px !important;
}
or some other combo so you're not defining the same property in both classes.
http://jsfiddle.net/b63nLkfa/1/
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
.bodyAmendment{
width:100px;
}
Your problem is about css priorities. Let's check my fiddle and use tool like firebug. Always.
You neglected to add in jQuery when you created your fiddle. This means your code was not firing. Also, when working with CSS, the last rule that is added takes precedence, regardless of when the class was added.
.test2 {
width: 100px;
background-color: #F00;
}
.test1 {
width: 200px;
background-color: #F00;
}
HTML
<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>
The CSS "cascades" down the document, each rule that comes later taking precedence over the last.
http://jsfiddle.net/b63nLkfa/21/
I normally use .php, and use an
<? include "includes/js.php"; ?>
which in this one file I have all my script calls. Make it alot easier to update an entire site from one file.
try <div class="aboutMe">aboutMe</div>
sometimes the " " are important
Related
First time posting here. I was wondering how to change the css for the html { } attribute of a single page. I am trying to make the background color for 2 pages different. If there is a better way to do it please let me know. Thanks!
I have done this:
html {
background-color: black;
}
for one page.
I want to do the same thing with a different color for another page (so that when you scroll out of bounds of the div it does not show a different color).
Every page must to take a different css external document:
<link rel="stylesheet" href="css/page1.css">
Then, you can change the element's properties:
/* 1st page */
body{
background-color: black;
/* background: rgb(0,0,0); **You can also use this property** */
}
/* 2nd page
body{
background-color: blue;
}
*/
Saludos!
This is one solution to your code. If you do not want the white part between two pages, just using position:absolute; in CSS.
Furthermore, your CSS code is not working because you forgot a "."
.page1{
height:100%;
background:red;
}
.page2{
height:100%;
background:green;
}
<body>
<div class="page1">
<p>
Your elements
</p>
</div>
<div class="page2">
<p>
Your elements
</p>
</div>
</body>
Im having a bit of trouble getting the review order (in this case enquiry) section to stick to the bottom of the header on scroll.
Ive gone through a few jquery examples with no luck and am now playing around with the sticky position for the element. Using a codepen example and playing around with it ive got it to work alright and have tried replicating it on the page through the inspector with no luck.
Codepen example
HTML
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<div class="second-content">SECOND CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
display:inline-block;
width:49%;
height:900px;
}
.second-content{
display:inline;
width: 49%;
height: 200px;
position: sticky;
top:0;
}
https://codepen.io/elad2412/pen/QYLEdK
Website URL
https://trolleys.wpengine.com/
Based on my understanding you would need jQuery to stop it from going through the footer as well correct?
Ive tried going about this a few different ways and tried it on a few different elements, some of which have stuck for a little while but i need to catch the whole column.
This is an example that best shows what im after, tried implementing this but couldnt get it working.
http://jsfiddle.net/bryanjamesross/VtPcm/
Fixed,
Had to give the form a few extra attributes, i was applying them to an outer div.
form.checkout {
height: 1500px;
position:relative;
display:block;
}
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.
Problem statement is, I have 2-3 web pages; and I want to have different body colors on this pages but keeping the class name unique to "myBody".
I looked for many blogs and authors but did not find any suitable answer to achieve this from a traditional CSS approaches.
Please suggest if it is possible to have a single CSS class accepting a parameter from a web page which will decide what body color should be applied using the same CSS with different parameters"
.myBody(#color)
{
background-color: #color;
font-size: 11px;
color: Black;
border: 1px solid;
}
The answer may be tricky for some folks but I really want to see if I can achieve this using CSS only.
You should split them up into different classes like this.
.myBody
{
font-size: 11px;
color: Black;
border: 1px solid;
}
.background_red
{
background: red;
}
.background_green
{
background: green;
}
Then use them like this
<div class="mybody background_red"></div>
<div class="mybody background_green"></div>
You also have the ability to overwrite css like this:
.myBody
{
background:red;
}
.overwrite_background
{
background:green;
}
<div class="myBody"></div>
<div class="myBody overwrite_background"></div>
The first div would have a background of red where the second one would have a background of green.
Here is another post you should look at. This reference a couple of options you have to handle this situation. How to pass parameters to css classes
Another option is to use Sass. Sass allows you to use a programming language to create your css. This is wonderful for changing things over a mass on the fly. If you use the same color in multiple places, or if you want to have a different configuration for each site and still carry the same css just different colors.
No, you can't do this with one class definition. There is no concept of parameters and function calls in CSS.
On the other hand, you can just about do this with minimal code duplication, but it's probably a bad idea. You say that you want to assume that there is only one classname in the class attribute. This is pretty silly, because it totally misunderstands what the class attribute is for, but we'll roll with it anyway.
We'll start by defining our classes with just the background colour:
.mybody-red {
background-color: red;
}
.mybody-blue {
background-color: blue;
}
.mybody-green {
background-color: green;
}
Then we'll define code for all the mybody-* classes with the attribute starts-with selector:
div[class^="mybody-"] {
font-size: 11px;
color: Black;
border: 1px solid;
}
This is, however, a silly idea, not least because it means that you are not separating markup from styling, and for myriad other reasons.
Maybe you can give a unique id in each page and keep the same class.What i mean is
file1.html
<html>
<body id="file1">
<div class"myBody"></div>
</body>
</html>
file2.html
<html>
<body id="file2">
<div class"myBody"></div>
</body>
</html>
file3.html
<html>
<body id="file3">
<div class"myBody"></div>
</body>
</html>
You have 3 different files.Each file has a body tag with a unique id and a div tag with the class you want
Now the css part:
.myBody
{
font-size: 11px;
color: Black;
border: 1px solid;
}/*common class for all files*/
#file1 .myBody{
background:green;
}
#file2 .myBody{
background:red;
}
#file3 .myBody{
background:grey;
}
This works fine if you have 2-3 pages.If you have more it will be a hard code to maintain
As an alternate option, since you intend to pass the color via the page, why not just set the style as an inline property using PHP? While it's better to put most of your css in a separate file, sometimes it just makes sense to travel down the hierarchy of acceptable CSS placements.
I'm not sure where you're getting the color from specifically, but there's nothing wrong with setting an inline style if that's the most efficient way to do it.
Example:
<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
YOUR TEXT
</div>
<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.