I'm trying to turn the round default pager buttons into square ones.
I managed to change the color of them by modifying the CSS of ".cycle-pager span", but its not responding to border-radius:0px;
Can't find anything in the documentation. Perhaps i'm looking for a 'too easy' method.
Any ideas?
That is because the 'template' used by default is '•' which places a text bullet (like from an unordered list) in the span.
To change this, you'll need to change that template using the Cycle2 settings.. something like this:
$('.slides').cycle({
pagerTemplate: '<span class="slide-links"></span>'
});
Then you can use your CSS to target and style those links. Hope that helps!
Related
I have an unordered list with anchor (<a>) tags and I need to apply some style based on what link the mouse is hovering.
Is there a way for me to access the classes of the element that is being hovered?
You can create an Item component that insides manages state to see if the rendered item is being hovered or not with the onMouseEnter and onMouseLeave functions. But since you are trying to modify the styling of the elements for such basic action as being hovered, you should keep with just CSS, targeting the HTML element with :hover selector.
In the first approach every Item component will have that state so then in the style={} you can do style={isHovered ? {background: "red"} : null} supposing you have an isHovered state.
I would recommend you styled-components, they are great.
In ReactJS the events have name like onMouseOver, you can see other events here.
For your case you can write like below:
<a onMouseOver={() => { console.log('hovered') }}> ~~~
If you want to apply a style to an element on hover, use the :hover CSS selector...
#mydiv:hover {
background-color:red;
}
<div id="mydiv">Text to hover on!</div>
If you can change the CSS only to get the style changes you want, that's ideal compared to using code to change the styles. With a 100% CSS solution, there's other advantages....
You can have people who only know CSS maintain and update the code.
You can disable styles without disabling code.
You can update styles without breaking code.
A CSS checker will catch issues in a .css file that would be missed if they were encoded in raw JS.
Source: MDN Documentation - :hover
I view a website's source code using Firebug and I find that there are div blocks that are not clear (its font color is lighter than others). I guess these are generated by some sources, right. How can I trace these out ?
For example if I have a div like this
<div id="someid">the stylish</div>
and this div is faded, I would like to use jquery to change its style for example, Will that actually work for me ?
because after I do this
$('#someid a').attr('style','somethingelse');
I can't find that faded div block anymore in my source. What happens ?
Try using css
$('#someid a').css('background-color','red');
You need to write specify css for tags, because browsers automatically apply colors for that
#someid a{
color:red;
}
also can change color by jQuery
$('#someid a').css('color','red');
I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.
The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/
A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/
How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/
Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});
http://jsfiddle.net/XtXGR/25/
There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/
I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
This code in the book jQuery in action, on page 156.
I don't understand this part:
{opacity:'toggle'}
Can toggle be an opacity value?
$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},speed);
};
From the documentation:
In addition to numeric values, each
property can take the strings 'show',
'hide', and 'toggle'. These shortcuts
allow for custom hiding and showing
animations that take into account the
display type of the element.
Using toggle will animate the opacity of the element at the speed you specify -- hiding it if it's visible, showing it if it's hidden.
The toggle is a short-cut string that toggles between the show/hide state of the element.
From http://api.jquery.com/animate/
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
jQuery doc:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element." Source
So yes, it can be a value.
Toggle, toggles between show and hide. From the same book:
In addition to specific values, we can also specify one of the strings hide, show, or
toggle; jQuery will compute the end value as appropriate to the specification of
the string. Using hide for the opacity property, for example, will result in the
opacity of an element being reduced to 0. Using any of these special strings has
the added effect of automatically revealing or removing the element from the display
(like the hide() and show() commands).
Did you notice when we introduced the core animations that there was no
toggling command for the fade effects? That’s easily solved using animate() and
toggle as follows
To help you maybe get around the English problem, here is a page that has a couple of demos right next to the code. Click once and it fades or slides. Click again and it returns to its original state.
If it's opaque it becomes transparent.
If it's transparent it becomes opaque.