I am trying to dim my page when hovering over the menu. I am using ubermenu (mega menu) for the navigational menu, and also using the X theme on Wordpress.
I have added a CSS class to add a darkened background to the page. In addition, I added a piece of code to dim the page when hovering over one of the tabs for the mega menu(in this example, #menu-item-443 is the ID for one tab).
When I try testing the code out, it doesn't work at all. I tried adding it to the Cornerstone visual editor and it works within the editor, but then won't work on the actual page.
What could be the issue with why the code isn't applying to the pages?
Any help would be appreciated!
CSS code to darken the page:
.dim{
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
display: none;
}
Code to dim the page:
$('#menu-item-443').hover(function(){
$('.dim').fadeTo(200, 1);
}, function(){
$('.dim').fadeTo(200, 0, function(){
$(this).hide();
});
});
The second property of fadeTo is opacity, but you're using display on the element itself. You'll need to use fadeIn/fadeOut instead, as those work with the display property. So it should look something like this...
$('#menu-item-443').hover(function(e){
e.preventDefault();
e.stopPropagation();
$('.dim').fadeIn(200);
}, function(){
$('.dim').fadeOut(200, function(){
$(this).hide();
});
});
Related
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:
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..
Everything I've searched for has shown about making a full div clickable, what I'm wondering is, is it possible to make a div in to a clickable link using just JavaScript and the div ID?
I have a layout of boxes and if a value in my database, I want PHP to echo some values in to JavaScript and say if this box is taken, give this div (boxID) the link that relates to it from the database. Only, there aren't going to be links on every div, as some won't exist in the database.
I suppose the alternative to this is wrapping each div in a <a> tag and an if exists statement?
In pure JS:
document.getElementById('your-div').addEventListener('click', function() {
location.href = 'http://your-url.com'
}, false);
By jQuery
$('#your-div').on('click', function() {
location.href = 'http://your-url.com'
});
you can easily make it so that when you click your div you go to another page, like this (using jQuery)
$('#myId').click(function () {
window.location = 'newurl.php';
});
In html5 you can just do:
<div>test</div>
This solution is for html <= 4. For html5, please read #Spencer solution.
Since the javascript is probably not what you want (waiting for extra comments), here's a example of how to do this in pure html/css. An anchor tag that fills completely a div, making that div clickable.
html:
<div>
<a href = "http://whatever.com/">
</a>
</div>
css:
div {
width: 200px;
height: 200px;
position: relative;
background-color: red;
}
a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 255, 0, 0.5);
}
Demo in jsfiddle (background-color added for demonstration purposes):
http://jsfiddle.net/Gx3f5/
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.
There is an excellent code example on how to make nice jQuery Twitter style alerts here:
http://blog.codecrate.com/2009/10/twitter-style-alerts-in-rails.html
$(function () {
var alert = $('.alert');
if (alert.length > 0) {
alert.show().animate({height: alert.outerHeight()}, 200);
window.setTimeout(function() {
alert.slideUp();
}, 3000);
}
});
However, one thing that the code doesn't include is functions to stick the alert div to the top of the window, no matter how far down the page the user has scrolled.
I have found a few examples but nothing seems to play nice with this existing code.
Any ideas?
You can use the CSS style : position: fixed though I think IE has some issues with that (no surprise there..).
Use position: fixed as well as top: 0px. That will keep the div at the top of the page, always. If you want it to the right or left, then add right: 0px or left: 0px to the div.