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. ;)
Related
I want to create a website, inspired by http://cirkateater.no/en/ .
The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.
My first solution was to use background-images, which worked.
With background-images, it looked like this JSFIDDLE:
http://jsfiddle.net/Ryanous/r7mLm4wg/4/ (i do not own these images)
Consider the following code:
<div class="background" style='background-image:url("http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'></div><div class="background" style='background-image:url("http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg");'></div>
But I also want to move the images via JS later on!
You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.
Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that always only one image is visible.
( id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code. )
So my question is:
How can I make images be only visible inside a certain div, but keep their positions fixed?
Putting the style overflow:hidden; on the div would hide all that's outside of the div.
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%;
}
I have written some jsp/ajax pages and they work as expended.
I have a need, when particular link is clicked, to dim the page with exception of particular
<div id="showAllRooms"> <div>
area.(put the page in the "shadows" except of one div)
I am perry geen in JavaScript; could you advise what would be the best approach to this task?
Thank you.
Create a layer (div) that is as large as the body (position:absolute, all corners to postion 0, no padding, no margin)
keep it hidden (display:none)
give it a darker backgroundcolor
give it a higher z-index property
[otionally] give it an opacity value (opacity:0.5)
give the div you want to show a higher z-index than the created div
show the created layer (display:block)
Or use one of the many frameworks for it, like jquery lightbox
Good luck!
If I understand what you need. You need put the page in the "shadows" except of one div.
It can be done easily with jQuery ui and it's Model widget.
preview
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
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.