I am developing a parallax portfolio site and want to include some jquery features. Currently I have a working drop down gallery but I am wanting to add a dot navigation to the gallery. Once I added the dot navigation, the drop down feature stopped working. I have set up an example on jsfiddle. The first link, shows the drop down feature. (Currently opens up every gallery at the same time.) The second link adds the dot navigation.
http://jsfiddle.net/carincamen/pvphpcuw/12/
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p>Click the small black box to show the large rectangle box.</p>
<img class="arrow">
<div class="gallery"></div>
CSS:
.gallery {
position: relative;
width: 620px;
height: 215px;
top: 30px;
left: 50px;
background-color: rgb(0,0,0);
}
.arrow{
position: relative;
width:20px;
height: 20px;
top: 15px;
left: 340px;
background-color: rgb(0,0,0);
}
jQuery:
$(document).ready(function(){
var display =$('.gallery');
$(display).hide();
$('.arrow').click(function(){
$(display).toggle();
});
});
http://jsfiddle.net/carincamen/pvphpcuw/
For ease of demonstration I have color coded the dot navigation buttons to correspond with the slides.
Thank you in advance for your assistance. It is greatly appreciated.
A special thank you for a LinkedIn group memeber who was prompt to take a look. The gallery drops down when clicking the arrow, then the navigation buttons change out the sliders. The small navigation buttons increase and decrease with opacity depending on their corresponding slider, and the large circle moves to the dot navigation that corresponds with the slider. The working code can be found here. Hope this is helpful.
I needed to remove the $(this).next and just use $ and then add $("[class^=gallery]").hide() to remove the previous gallery.
Related
I am using the Foundation 5 framework for a WordPress website and need to improve the responsive menu. My menu will have a lot of drop down items which as it stands at the moment will all sit on top of each other when viewed on a smaller screen. I need some sort of accordion effect with a plus button to drop down each item. If this is possible with the Foundation menu can anyone point me in the right direction?
Here is a screenshot which shows what I need:
Let´s try this one (you need to play with the rules position and font size):
note: Without code is a shoot in the dark :)
.top-bar-section .has-dropdown > a:after {
content: "+";
display: block;
height: auto;
position: absolute;
right: 0;
top: 50%;
width: 0;
font-weight:bold;
}
Im creating a mobile version for my website, and I'm currently busy with a 'image scroll' by swiping. I found a code on the internet I'm using, but it doesn't work with the menu i've created.
The menu that pops up, stays below the image scroller..
How do I get it to get below the opened menu?
Thanks for the help!
Regarding this page: http://m.tf2-29.com/TF_Members.asp
Try to set z-index of popmenu
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
.bbstable
{
BACKGROUND: #1e201c;
margin: 0px;
padding: 0px;
z-index: 2; /* set z-index higher than image scroller */
}
or remove z-index: 1 in .swiper-container
I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo
Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)
Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.