DROP MENU LINK
jsfiddle.net/a3MKG/83/
Refer to link above. Does anyone know how to get the navicon image to change upon click? I want it to become a different image (a picture of an X) once I click it.
Note: When you click the navicon, the drop menu comes down, and you can click anywhere OUTSIDE the drop menu to bring the drop menu back up, so you don't have to click the X image to remove the drop down and bring back the initial image. So I need the new navicon image only to be an X when the dropdown menu is actively displayed.
Any help will be much appreciated! Thank you all.
Ok so I saw your comment re. 'how do I close it just on closing the image' before i made my fiddle.
I changed your div dropTitle to an a and added another class to it menu-open
.menu-open{ background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
background-size:100% 100%;
}
and added a function that toggled it with 'close'
$('a').click(function(){
$(this).toggleClass('close')
});
.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
background-size:100% 100%;
}
I tweaked your dropTitle class slightly to
.dropTitle{
display:block;
width:50px;
height:50px;
cursor:pointer;
}
but the functionality remains the same
Do not use javascript where you can use css!
input, input:before, input:after {
display: block;
content:'';
appearance: none;
-webkit-appearance: none;
position: relative;
width:20px;
background:black;
height:4px;
border-radius:2px;
transition: all linear 0.1s;
}
input:after{
top:3px;
}
input:before{
top:-7px;
}
input:focus:after{
transform: rotate(45deg);
top:-4px;
}
input:focus{
background:transparent;
}
input:focus:before{
transform: rotate(-45deg);
top:0px;
}
input:not(:focus) + div{
display:none;
}
<input type="checkbox" />
<div>
<img class="dropPillow" src="https://image.freepik.com/free-icon/square-outlined-shape_318-75498.png">
</div>
Related
I am trying to use jquery.caption (https://github.com/louisbros/jquery.caption). I want the caption to be in a black rectangle with white text. When I mouse over my images, some of them display the caption correctly, but others don't display it at all, and others display it very lightly and hard to see. As I mouse over the images, some that were displaying it stop displaying it. If I look at the HTML I can see that the opacity changes and that is why the caption are sometimes not visible. When I first bring up the page, most of the elements have opacity=1, but others will have a very small number like 0.00301952217705548. As I mouse around, elements that started with opacity=1 will change to a very small number.
Here is my code that creates the elements:
$image_div = $('<div />')
.addClass('gImage-row')
.appendTo($preview);
$image_div.append($('<a />')
.addClass('no-highlight')
.attr('href', "{{ IMAGE_DIR }}"+image.image.replace(/thumbnail/,'jpg'))
.attr('rel', "superbox[image]")
.append($('<img />')
.addClass('gImage')
.attr('alt', 'some text')
.attr('src', "{{ IMAGE_DIR }}"+image.image)
.attr('onerror', "noimage(event)")));
This is in a loop and it creates 30-40 images.
In my window.onload function I do this:
$('.gImage-row img').caption();
Here is my CSS:
.figure{
position:relative;
margin:0;
padding:0;
}
.figcaption{
position:absolute;
left:0;
bottom:0;
width:100%;
height:20px;
background-color: black;
foreground-color: white;
opacity:1.0;
}
a:hover.no-highlight {
background: transparent;
}
.gImage-row {
float: left;
text-align: center;
}
.gImage {
width: 150px;
height: 100px;
margin-right: 1px;
background-color: transparent;
}
.label {
float: left;
}
I cannot figure out what is making the opacity change or how to fix this. Anyone have any ideas?
So I think I figured out what is going on here. The code in jquery.caption was doing this:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
$(this).data('caption').figcaption.stop().fadeToggle();
});
fadeToggle works by changing the opacity. Because I had so many images close together, when the user moused around there were a lot of mouseenter and mouseleave events, and each time one occurred it would call stop on the existing fadeToggle. This would leave the opacity at whatever it was at at the moment. I changed this to:
$(this).bind('mouseenter.caption mouseleave.caption', function(){
if ($(this).data('caption').figcaption.css('display') == 'none') {
$(this).data('caption').figcaption.show();
}
else {
$(this).data('caption').figcaption.hide();
}
});
And now it's working perfectly.
I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?
<div class="modal">
<form>
....
</form>
<div class="ajax-indicator hidden"></div>
</div>
after click of submit button
<div class="modal">
<form class="hidden">
....
</form>
<div class="ajax-indicator"></div>
</div>
Create multiple stages (CSS classes) & activate them with js events.
You can achieve your animation with just some eventhandlers such as:
click,transitionend,submit...
and then just change the correspondent class.
Css
#box{
position:fixed;
width:0px;
height:0px;
top:0%;
left:0%;
background-color:black;
margin-left:0px;
margin-top:0px;
-webkit-transition:all 700ms ease;
overflow:hidden;
border-radius:0px;
}
#box.active{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
border-radius:0px;
}
#box.loading{
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
border-radius:100px;
}
js
in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn
function clk(e){
box.classList.add('active');
}
function frm(e){
e.preventDefault();
box.classList.remove('active');
box.classList.add('loading');
setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);
Demo
http://jsfiddle.net/hHD87/
this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...
maybe you need to add custom prefixexs like -webkit -moz -o ...
here is another example that uses also the delay witch is very important to completely hide the window at the end.
http://jsfiddle.net/RAu8Q/
After click submit button change the css of the model box.
var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";
and set the ajax-indicator div position to center to get the model at center.
var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";
Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.
Regarding animation you can add transition: all .5s to your .modal-class
Example: http://jsfiddle.net/eSsM5/1/
css:
.modal {
margin: 0 auto;
width: 200px;
height: 200px;
transition: all .3s;
background-color: red;
text-align: center;
padding-top: 30px;
}
.loading {
width: 100px;
height: 100px;
}
.loading > form {
display: none;
}
.loading > .spinner {
display: block;
}
.spinner {
display: none;
}
html
<div class="modal">
<form>
your form
</form>
<div class="spinner">
Now loading!
</div>
</div>
<button type="button">toggle loading</button>
js
document.querySelector("button").addEventListener("click", function() {
var modal = document.querySelector(".modal")
modal.classList.toggle("loading")
})
I have a slight issue with my design. I currently only know how to use CSS/HTML and I would like to add a bit of "pzazz" into a design of mine. This being said , I have been looking at jQuery snippets from others who have tried to do something similar. The text appears under when the other item is hovered on however , the other items in the list move down , even if they all have the same text but since the display:none until it's hovered on , it's as if it isn't there.
These pictures should explain far better than I can.
The two different states :
http://gyazo.com/6f736e7ef79409dbd3398facb03dcf5c.png
Just to clarify ; it is the other boxes that move down. The box with the acorn stays in the same location.
In case you wish to see the code which I used , you can do so here :
http://codepen.io/redhotfusion/pen/ipocE
Here is the CSS bit :
.t_s_ul {
list-style-type:none;
width:90%;
padding-left:5px;
margin-left:-10px;
margin:0 auto;
}
.t_s_li {
width:70px;
height:70px;
border:4px white solid;
display:inline-block;
border-radius:5px;
margin:5px;
position:relative;
}
.t_s_li:hover{
transition:1s;
background-color:white;
}
.type_icon {
background:url("http://i.imgur.com/xix8EC9.png");
width:100%;
height:100%;
background-size:100%;
margin-left:-2px;
}
.type_icon:hover{
transition:1s;
cursor:pointer;
background:url("http://i.imgur.com/e1IONg2.png");
}
.course_type_text {
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
The HTML :
<ul class="t_s_ul">
<li class="t_s_li">
<div class="type_icon"></div>
<DIV class="course_type_text">Course One</DIV>
</li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
</ul>
THE JS/JQUERY
$(function(){
$(".spire-menu").hover(function(){
$(this).find(".menu-item").fadeIn();
}
,function(){
$(this).find(".menu-item").fadeOut();
}
);
});
$(".spire-menu").on('mouseenter mouseleave', function () {
$(this).find('.box').fadeToggle(100);
});
Very sorry if this is a real noob question but we all have to start somewhere!
Any advice or help is great!
Thank you ,
-Valdis
Add position: absolute; to your .course_type_text in the css
This prevents the div from altering the layout.
You could then even remove the fixed with you are adding to that class, because it will just overlap all other html elements
Also change your hover function to this:
$(".t_s_li").hover(function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeIn();
}
,function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeOut();
}
);
This will prevent queuing the animations when you move fast over it with the mouse several times.
See here for demo:
http://codepen.io/anon/pen/fICiD
Since you are using display:inline-block to get side by side the li elements you can use this on your class t_s_li:
.t_s_li {
vertical-align:top;
}
The demo http://codepen.io/anon/pen/jHbBq
For default the vertical-align for inline-block elements is baseline.
Try adding:
float: left;
to your .t_s_li class
http://codepen.io/anon/pen/oLIbz
Or what Dank and RononDex suggested... this is just another way to do it. :D
Apply float:left to .t_s_li
like this,
.t_s_li {
float:left;
}
Here's your css:
.course_type_text {
float: left; /*<-----added here*/
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
display:block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Demo JSFIDDLE
I am working on a website that features many links on the same page:
http://www.alexanderlozada.com
To let the user know what item they are currently viewing, I'd like to implement a small triangle that points at the currently selected item.
example:
How could I go about doing this without making each link a separate page?
sample of the link I am working with- (I have to keep the current href and rel)
<a class="grey show_hide" href="#" rel="#projects" >
PROJECTS
</a>
In most cases this is done by using pseudo elements :before and/or :after like so (read full article)
CSS:
/* creates triangle */
.selected:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-2px;
left:50%;
width:0;
margin-left:-10px;
border-width:0px 15px 15px;
border-style:solid;
border-color:white transparent;
}
div.links {
display: inline-block;
position:relative; // you must have this to position the triangle propery
width: 25%;
height: 45px; // adjust height to fit the menu
float: left;
text-align: center;
font-size: 24px;
padding-top: 10px;
}
jQuery:
$(function(){
$('.show_hide').click(function(){
$('div.links').removeClass('selected'); // remove all other 'selected' links
$(this).parent().addClass('selected'); // sets the current .links to be selected
});
});
Add an active class in your :
<a class="btn active">menu link</a>
css:
.btn.active { background:url(cursor-active.png) bottom center no-repeat; }
js:
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
You can see here : FIDDLE
http://jsfiddle.net/bryank/YPxb5/
#spacer{
position:fixed;
top:11px;
left:200px;
height:79px;
width:155px;
background-color:#fff;
}
#spacer:active{
-webkit-animation: click .1s 1;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes click{
0%{-webkit-transform:scale(1,1);}
100%{-webkit-transform:scale(0.9,0.9);}
}
/*------begin nav------*/
#toggler { display: none; }
#nav{
padding:0;
position:fixed;
top:11px;
left:26px;
font-family:helvetica;
font-size:14px;
background-image:url(logo_back.png);
/*-- background-color:red; --*/
width:11.1em;
height:5.7em;
overflow:hidden;
transition: height .4s;
-webkit-transition: height .4s;
}
input:checked + #nav{
height:33em;
}
/*-- #nav a.bg:hover{
background-color: rgba(0,0,0,0.0);
} --*/
#nav a{
text-decoration:none;
color:#000;
}
#nav a:hover{
background-color:#858585;
}
#nav div{
text-indent:0.5em;
line-height: 1.2em;
}
<!--img button-->
<div id="spacer"><img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" /></div>
<!--drop down nav-->
<label for="toggler">
<input id="toggler" type="checkbox">
<div id="nav">
<!--logo_image-->
<img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" />
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b></div>
<div style="height:1em;"></div>
<div>Ahnnu</div>
<div>Cex</div>
<div>Co La</div>
<div>Delicate Steve</div>
<div>Dope Body</div>
<div>Dustin Wong</div>
<div>Eachothers</div>
<div>En Passant</div>
<div>Gem Vision</div>
<div>Holy Ghost Party</div>
<div>Jimmy Joe Roche</div>
<div>Jason Urick</div>
<div>Ken Seeno</div>
<div>Kid Krusher</div>
<div>Lil Jabba</div>
<div>Rick Rab</div>
<div>Teeth Mountain</div>
<div>Teenage Souls</div>
<div style="height:1em;"></div>
<div style="font-size:1.1em;">INFO</div>
</div>
</label>
In my fiddle here: http://jsfiddle.net/bryank/YPxb5/ I have two buttons,
button on the left is a drop down menu using a transition (thanks to user:'squint' for showing me the hidden checkbox solution in a previous question.) the button itself does nothing but trigger the menu.
and next to that on the right I have a button that appears to click down using scale in an animation
I want the button on the right to drop the menu directly underneath of the button.
I am certain the only way to do this is with javascript (though I am constantly surprised by the CSS cleverness out there) I have recently bitten the bullet and decided to learn javascript from the ground up...love the eloquent javascript hyperbook so far
any ideas?
thx
Finally got this to work how I wanted.(not without help from stackoverflow users, thanks again.) Im sure the jQuery is a little dirty but...it works.
http://jsfiddle.net/bryank/YPxb5/1/
$(document).ready(function(){
$('#spacer').mousedown(function(){
var val=.9
$(this).css({'-webkit-transform':'scale('+val+')','-moz- transform':'scale('+val+')'})
.mouseup(function(){
var val2=1
$(this).css({'-webkit-transform':'scale('+val2+')','-moz-transform':'scale('+val2+')'})
});
});
});
$(document).ready(function(){
$('#spacer').mouseup(dropDown2)
});
function dropDown2(){
$('#nav').toggleClass('navDrop');
}