I am really green to jQuery and when come across these two methods, I do not know why it is useful.
.addClass() and .removeClass()
Yes, I can add the class in my js file. But why would it be beneficial? Is it because we are not suppose to modify the HTML?
The case I have:
In HTML:
<div id="title" class="highlighted">I'm highlighted!</div>
In CSS:
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
If I want to add .highlighted to any div in my HTML, I can simply add it like this:
<div id="text" class='highlighted'>Highlight me, too!</div>
Why do I need to bother do this in my js file?
$('#text').addClass('highlighted');
Because you might want to add the Class when something else happens, maybe when clicking on the div.
$("#text").click(function(){
$(this).addClass('highlighted')
})
The addClass()/removeClass() methods come in handy when you are trying to dynamically add/remove a class that an element might not originally have.
This comes in handy when let's say you select an element and you want to add a highlighted class to convey a selection. It's a great tool to use when you want to change things around when you have good user interaction so you can return immediate feedback to a user given their choices.
You would use addClass and removeClass for dynamically created elements, animation effects, or as the result of an event.
Dynamically created elements:
Example, if you click a button that creates a div on your page. Perhaps later you need to apply a class to the div.
Animation effects:
You can use addClass to animate position and colors of elements. One example on the top of my head is parallax scrolling websites, where when you reach a certain location, an effect is applied. In addition, removeClass could then be called when scrolling back up to reverse the effect.
Result of an event:
Adding a click event to a button that adds a class to change an elements color, font size, etc.
Related
I'm trying to create a row of multiple divs using Javascript or jquery; say 32 tiny DIVs. Since the size is not fixed, I can simply use HTML. Table cells could also be an alternative, but since I need the click ID, and their color should change later, it is better to go for DIV.
I did it, but the divs are getting vertical instead of horizontal. What I want to do is exactly the notion of Sliding window in TCP. Look at the row of ack'ed packets on top of this simulation: http://histrory.visualland.net/tcp_swnd.html
I want for instance after a button click, the sliding window move to the right one step.
This is my project, simulating the above link for TCP: http://jsfiddle.net/j26Qc/47/
partial code for row of DIVs:
for(var i=1;i<=16;i++){
$('#table').append("<div id='"+i+"'>"+i+"</div>");
}
You need to change the display style of the divs, they default to display:block, so what you are wanting to do is give them inline-block style.
JS
for(var i=1;i<=16;i++){
$('#table').append('<div class="inline" id="'+i+'">'+i+'</div>');
}
CSS
.inline {
display:inline-block;
}
To get them to look like the little blocks in your link, you would need to add additional styling
CSS
.inline {
display:inline-block;
width:20px;
height:20px;
border:1px solid;
text-align:center;
}
note that in your fiddle your .table class is only 150px so this would make some of them wrap around, either make the text and size of the divs smaller or make your .table class longer.
My webview is using horizontal scrolling like a book to show the HTML contents. I am using scroll function to do this. My question is, how can I add a bottom border on every page using JS or jQuery?
I recommend using css to accomplish this. If you want your page's body to have a border, you would simply add this rule to your css:
body {
border-bottom:5px #f00 solid;
}
To accomplish this same result using jQuery, add this to your scripts:
$(document).ready(function() {
$('body').css({'border-bottom':'5px #f00 solid'});
});
Let me know if this accomplishes your goal!
Add a class to every page, then use that to add a border to all of them at once.
If the class name is page, then use this jQuery:
$(".page").css("border-bottom","1px solid black");
You can use any border style.
I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.
I have a 4x4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:
When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect.
Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.
I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using setAttribute.
Here is a summary:
Before:
<div> ... </div>
After:
<div class="hoverTile"> ... </div>
Style:
.hoverTile: hover{
text-color: red;
}
This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?
Look at the demo I set up for you HERE
2 issues:
1) your seudo-selector (:hover) shouldn't have a space after the colon (:).
2) text-color should just be color
Micron and Igo probably answered your question although i'd like to add that you could achieve the same effect by adding
div:hover { color: red;
}
(you might not need the hoverTile class).
As for the border color
border-color:red; should work. [W3schools] So
.hoverTile { border: 5px solid #ff0000; } in your scheme.
Your CSS should be
.hoverTile:hover {
color: red;
}
not text-color (which is not a CSS property). Hope that fixes it.
EDIT: Also, if I understand correctly, you are adding hoverTile class on mouseover? In that case, you wouldn't need the :hover pseudo-class in your CSS at all. Make sure to remove the hoverTile class on mouseout though.
i'm writing a sophisticated visual effect, that changes "box-shadow" property.
Let's for short, just name the value for shadow (1pt 1pt 3pt rgba(...)), like "shadow".
I have a stylesheet, and HTML element in question.
Element has, say, "shadow1" value defined for normal state, and "shadow2" for hovered state:
.elem {
box-shadow: #333 1pt 1pt 3pt; /* shadow1 */
}
.elem:hover {
box-shadow: #666 3pt 3pt 5pt; /* shadow2 */
}
My script adds it's own shadow to existing one. So:
box-shadow: shadow1, shadow2
This is simple to implement. I just need to do following, using jQuery:
var defaultShadow = elem.css("box-shadow");
elem.css("box-shadow", defaultShadow + ", " + anotherShadow);
So, the algorithm is following:
var defaultShadow = elem.css("box-shadow");
Do something in a setInterval. Add another shadow to default one
The problem arises, when element gets hovered, having effect-script running. In this case, effect is already working with "defaultShadow", that was obtained in step 1.
It's more harder, because shadows, stated in script appears in the "style" attribute, and all rules, declared with external CSS are getting overridden.
Is there a way to get CSS styles, declared in a .css file, for element in question, using JavaScript. I need also styles for states of the element, like ":hover", ":active" etc.
Is there a way to get CSS styles,
declared in a .css file, for element
in question, using JavaScript. I need
also styles for states of the element,
like "hover", "active" etc.
You should be able to modify the cssRules object with javascript to create your own rules instead of relying on inline styles.
See this blog post for a bit more information.
Example of IE:
document.styleSheets[0].addRule("p .myclass", "font-size: 120%");
Example for Firefox:
document.styleSheets[0].insertRule("p{font-size: 20px;}", 0);
Reference doc these were found.
document.getElementById("id").className = 'arrow_box