I created something similar to slider, which has three blocks with two pictures and description in each. At the top it shows one of these blocks with its two pictures and description. At the bottom you can see previews for two other blocks without description. It looks like this (pictures are random):
http://plnkr.co/edit/o9wTYhrTnpfgXu4aEIYW?p=preview
Here it works as expected, but there is one thing I don't understand. When you click at the bottom preview, it removes description from top active pictures, and adds description to bottom inactive ones, and blocks change position. By default all the figcaptions with descriptions have class .sliderblock__caption and are hidden in css, but those with class .sliderblock__caption--active are displayed:
.sliderblock__caption{
display: none;
}
.sliderblock__caption--active{
display: block;
}
With css it works fine, but when I try to us js instead, it doesn't.
http://plnkr.co/edit/kpnx9oGJzvz94u7rjGTM?p=preview
I placed the same hide stuff in js-file, but it's not hiding what is expected to be hidden.
var caption = ".sliderblock__caption";
var activecaption = ".sliderblock__caption--active";
$(caption).css("display", "none");
$(activecaption).css("display", "block");
If you click on one of the bottom blocks, the block will change position, but descriptions will not.
The point is that it actually adds the "active" class to figcaptions, but it's not working. When you look at the elements in Firebug, it shows that figcaptions at the top have "active" class, but their css is following:
element.style{
display: none;
}
Where does this rule come from? And where should I put the piece of code in js to get the same effect as with css?
When you do $myElm.hide() or $myElm.css("display", "none") you're setting the style attribute to display:none. That's the inline element CSS.
You can do the same using the style attribute:
<div style="display:none">
Using CSS (even you're using inline or rules in your file), doesn't require JavaScript while jQuery css method require the browser to allow executing of JavaScript.
Related
I've looked for a similar question to my issue, but it appears I'm unique.
So I have a list of divs that have a <a> tag within them which then toggles out an inline description which is within a hidden span tag inside the parent div.
I'm relying on the jQuery UI library to animate the sliding toggle. jQuery toggle and slideToggle by default is just not suitable for what I want - i only want to animate smoothly along x axis (width).
Here is an example of the HTML code:
<div class="links" id="qanzac100">
Q ANZAC 100 <a class="first">+</a>
<span class="hide"> brings our shared history to life and creates a renewed legacy for future generations.
</span>
</div>
I've made the jQuery/JS script loop as such:
// jQuery toggle for other sites buttons
$(document).ready(function() { //supposed to stop FOUC
$(".hide").hide();
$(".first").click(function() {
if ($(this).html() == '+') {
$(this).html('-')
} else if ($(this).html() == '-') {
$(this).html('+')
}
$(this).next('.hide').toggle("slide", "right", 500);
// Animation complete.
});
});
Everything works but when the slide action animates, it slides out on a new line (block) and then when animation is finished it 'flicks' back into the inline style I originally set for it.
For better illustrative purposes, here is the JS Fiddle for it http://jsfiddle.net/coolwebs/dx8fd51f/10/
I just want it to smoothly slide out and show all on the same line and if it needs to push out to the next line, it does that when it hits the max width.
Is that possible using the jQuery toggle library?
The problem lies in the jQuery UI library that you are using.
It actually replaces your span element with a div with a class of ui-effects-wrapper and of course a div's standard display type is block.
If you look at this js-fiddle you can see why it does that. It's to avoid the text that is sliding in from overlapping the text that is already there.
(In that fiddle I overrode the display style of ui-effects-wrapper.)
There are several ways you could fix this but the easiest would be to not rely on the UI library and just use class toggles to run the animation.
I am working on a responsive site layout where the content area for certain pages may have a right hand side info panel and others might not. I am building this site within a custom CMS that my work uses. Now, we use Templates where all the HTML structure is created and use macros to pull in the content that the client enters via the CMS.
Usually I would create a separate template for the pages that would use the right hand panel and a separate template for those that don't but as the client might want to add the right panels to pages that don't have them in the future, I was wondering if there is some overwrite style that I can add to my template so that the whole site can run on one template rather than having to add a template that has the right panel for one page and a template that doesn't for another.
My code would be something like this:
CSS:
section#maincontent {width:720px; float:left;}
aside {width:240px; float:right;}
HTML:
<section id="maincontent">[conetent]</section>
<aside>[right_panel]</aside>
Is there a piece of javascript/CSS/web magic that can overwrite the right panel div if the client decides to add/remove the right panel from a page/template so that the maincontent fills the width of the page without having to create a new template with the style added/removed?
You can simply change it to display none.
HTML
...
<div id="theOneToBeRemoved" onclick="remove()">
</div>
Javascript
function remove(){
document.getElementById("theOneToBeRemoved").style.display = "none";
}
I will note though that you may not want to add the onclick event to the div... Maybe add a button X or close..something along those lines... So if they click into the div it doesnt accidentally close... Also, you may want to add some css transitions to your div... So that when it closes its smooth instead of so abrupt.. Looks much better
Add a wrapper div, output the class "withoutRightPanel" when you want to "remove" right pannel, and add css rules below:
HTML
<div class="withoutRightPanel">
<section id="maincontent">[conetent]</section>
<aside class="rightPanel">[right_panel]</aside>
</div>
CSS
.withoutRightPannel .rightPanel
{
display:none;
}
.withoutRightPannel #maincontent
{
//Fill the gap after you hide right panel, or you can set a value by pixel
width:100%;
}
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
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