With the use of namespace, i'm trying to make a div-element in Javascript where if you hover over the div it'll change color and change back when not hovering over it. Please help!
Is this what you need? There is many ways to do it, I used plain js. The css you put whetever you want.
I don't understand what the namespace means in your situation.
Following are the respective javascript, css and html. But things like this you can google and find the parts that you need.
function changeColors(){
if(document.getElementById("myElement").classList.contains('class1')){
document.getElementById("myElement").classList.remove('class1');
document.getElementById("myElement").classList.add('class2');
}else{
document.getElementById("myElement").classList.remove('class2');
document.getElementById("myElement").classList.add('class1');
}
}
.class1{
color:red;
}
.class2{
color:blue;
}
<div>
<h3 id="myElement" class="class1" onmouseover="changeColors()"
onmouseout="changeColors()">
Hello
</h3>
</div>
Related
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>
I’ve started using BEM on some projects and find it a little unwieldy to write within my HTML. I was trying to make it simple so I have to repeat myself less when I’m writing classes for each element and apply some structure with JS that would force me to do this properly. The output would be something like:
<div class="intro intro--red">
<h1 class="intro__title">Title</h1>
<p class="intro__p">Text</p>
<p class="intro__p intro__p--red">Text</p>
Link
</div>
but written shorter and simpler like:
<div b="intro" m="red">
<h1 e="title">Title</h1>
<p>Text</p>
<p m="red">Text</p>
Link
</div>
This way I could have named elements or it can give me classes based on the html element if none are set. This would then hopefully help keep my sass nice and clean and be really quick to type. I attempted a basic implementation but I think there may be a better way to do this or I might be doing something I shouldn't using html attributes like that?
Any wisdom or pointers would be much appreciated?
I had this exact same issue using BEM. My solution was to make my code a form of BEM but not 100% according BEM guidelines.
What i did is something like this:
<div class="intro">
<div class="intro-title">
<p class="red">Some Text</p>
</div>
</div>
So things like colors would get global helpers, then a bunch of helpers for simple styling like font sizes or spacing etc.
For the actual intro block this is how my sass would look like:
Intro.scss
.intro {
&-title {
float: left;
}
}
Helpers.scss
.red {
color: red;
}
As you can see you can go as deep with the nesting of sass as you want, i keep the rule of max 3 levels deep.
It's not a 100% BEM approach but it's a form off :)
Hope that helps you.
I would also avoid putting these custom attributes on html and parsing things with JS, when it comes to these things me personally I'm a bit of a purist and HTML is not meant for this so i wouldn't use it. Plus potential content flickers when loading the css through JS and keeping performance in mind as well. But it's totally your own preference, just giving you a pointer in how i solved this issue that works for me.
I have some colors that when clicked I want to change the value of some css.
I want to change the color css value of this css :
article .teleprompter p
{
padding-bottom: 15px;
margin-bottom: 15px;
color:white;
}
The html:
<div class="swatch concrete" onClick="javascript:changeBTC('#95a5a6')"></div>
This is the java script I use for a similar function . This one changes the background color:
<script>
function changeBGC(color)
{
document.getElementById("teleprompter").style.backgroundColor = color;
}
</script>
Would it make a difference in JavaScript code if the css was in a separate style sheet?
don't add javascript: in onclick code - the borwser already knows it is javascript! You only need to add javascript: to an <a href> to tell the browser it is script rather than a URL:
So you just need this:
<div class="swatch concrete" onClick="changeBTC('#95a5a6')"></div>
or you could do this if you wanted to use a link:
<a class="swatch concrete" href="javascript:changeBTC('#95a5a6')"></a>
Your function is changeBGC, but you're executing changeBTC. Replace changeBTC('#95a5a6') with changeBGC('#95a5a6')
It will not make a difference if the css was in a seperate file as long as you are refering the css file in your html page.
Moreover in css you are refering the object as class in css (.teleprompter) and in javascript you are refering the object with id (getElementById). So either use id in both the places or class in both the places
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.
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