I'm making a jquery mobile app and have a page that needs to filter some posts.
I have the posts put in as well as the design of the filter.
You can see what it looks like below:
I've been trying to animate it so if the user presses "social" on the right, "outside" and "business" will get pushed out to the left so the filter you have selected is always in the centre, between the two dividers.
Here's an example of the sort of js I was going to use to move the divs around but just for 1 div instead of 3:
$(function(){
var c=0;
$("#click").click(function(){
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});
The problem i was having is that if the user was to press the button on the right or left every time it would need to have an infinite number of divs sliding in and I was just wondering how to implement this.
Here's a jsfiddle with the assets I'm using (Without the jquery mobile styling)
https://jsfiddle.net/xczy346z/
EDIT: Here's also a gif of what I want to happen if you can't understand what I'm trying to make. Example Gif
Use this javascript
$(document).ready(function(){
$("#social_one").click(function(){
$("#side_scroll").animate({marginLeft: '-=130px'}, 500);
});
});
`
Theoretically, may I suggest that you remove your dividers (#divider_***), both from the html and css, and add them as a pseudo on the text_slider like this
#text_slider:after {
content: "";
position: absolute;
left: 33%;
top: 10%;
bottom: 10%;
width: 33%;
border-left: 1px solid white;
border-right: 1px solid white;
pointer-events: none;
}
Doing like this keeps the side_scroll clean and only the "buttons" to work with when animate.
Now you can simply just animate your side_scroll to right or left having the selected "button" in the middle no matter how many they will be.
Here is an updated fiddle of yours showing the pseudo:
Related
I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.
I have no idea what goes wrong with my code but it gives me errors every time I click the blue Chat Here button. The button's supposed to be shorter when the iframe is hidden then when the iframe slides up, the blue button should take up the whole space the same as the iframe as well.
View Demo
Here's the JS I have so far
function showChat() {
jQuery("#blk-collaboration .chatbox").slideToggle("slow",function(){
jQuery("#blk-collaboration #toggle").css("background","#45A1F1");
});
jQuery('#btn-chat').click(function() {
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
}
$(document).ready(function(){
$('.chatbox').hide();
});
I'd greatly appreciate if you could provide me a demo as well. Been working on this code for two days now and I haven't found the right solution yet.
First of all, you forget to put ; on your height property. Another important thing is that you need to change your class position like this:
.button {
background: #45A1F1;
height: 40px;
width: 620px; /*Width of regular button */
}
.wide {
background: #45A1F1;
height: 40px;
width: 300px; !important; /* Width of wide button */
}
You can simplify your code by using this jQuery:
$(document).ready(function(){
$('.chatbox').hide();
$('#btn-chat').click(function() {
$("#blk-collaboration .chatbox").slideToggle("slow",function(){
$("#blk-collaboration #toggle").css("background","#45A1F1");
});
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
});
Check out this Fiddle..
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.
I want to know how gmail implements its add link to mail function - is it a div which changing it's display? Is it another layer? Or is it something else?
Thanks in advance,
oz radiano.
Are you talking about one of these?
Add link form
GMail Add Link 1 http://www.kalleload.net/uploads/thumbnails/bxpwxqpauzxe.png
Floating link toolbar
GMail Add Link 2 http://www.kalleload.net/uploads/thumbnails/rrdkcg_tuqjfypvmlra.png
(click images to enlarge)
Edit:
The main secret is that you want to pull your box out of the flow of the HTML. This is easily done using position: absolute; and then position the box using top, left, right and bottom.
For example, here's a code snippet (full code example):
.box {
background: #fff;
border: 3px solid #333;
left: 2.00em;
padding: 2.00em;
position: absolute;
top: 2.00em;
}
Asynchronous javascript server callbacks with DOM manipulation. More then just swapping out the html in one big div, but updating things only where they need to be and when they need to be.