as you can see on this jsfiddle I'm trying to fade out elements when they enter viewport, using waypoints plugin. Unfortunately this is not working - nothing fades out. Any idea why? Many thanks
CSS and HTML
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.pre-block {
background: green;
width:90%;
Height: 800px;
margin-bottom:50px;
}
.block {
background: red;
width:90%;
Height: 200px;
}
.col1, .col2, .col3, .col4 {
float: left;
width: 25%;
background: red;
text-align: center;
font-size: 12px;
color: #fff;
font-weight: 300;
height: 24px;
vertical-align: middle;
display: table-cell;
}
.c1 {
background: #253151;
}
.c2 {
background: #253151;
border-left: 1px #FFF solid;
}
.c3 {
background: #253151;
border-left: 1px #FFF solid;
}
.c4 {
background: #253151;
border-left: 1px #FFF solid;
}
<div class="pre-block"></div>
<div class="block">
<div class="col1 c1">dsqd</div>
<div class="col2 c2">sdsqdss</div>
<div class="col3 c3">sdqsdsq</div>
<div class="col4 c4">sdsqd</div>
</div>
<script src="http://imakewebthings.com/jquery-waypoints/jquery.js">
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js">
JS
$('.block').waypoint(function() {
$(".col1").delay(10).fadeOut("slow");
$(".col2").delay(20).fadeOut("slow");
$(".col3").delay(30).fadeOut("slow");
$(".col4").delay(40).fadeOut("slow");
}, { offset: 10 });
Your provided offset: 10 is not able to reach in fiddle.
Increase the offset and all is perfect.
Live Demo
It works perfectly. I added an alert('ok'); to the function and made the display iframe a bit smaller and I get the expected result:
Maybe this offset would be better:
offset: $(window).height()
Related
I am new to js and have hit a brick wall with altering how I calculate an element width depending on the screen size. I started with only calculating the width by how many of the list items were set to "plan-visible". It works great on a laptop screen, but doesn't break at css media query widths when the screen is smaller. I then had the brilliant idea (haha) of attempting to this directly in the javascript with an if/else statement, which I have little experience with. The result was that it did absolutely nothing. I researched and researched and it looks (to me) like it should work, but I am obviously missing something. I have included the html, the original js that worked for a static element, and then my failed attempt at making it responsive. Thanks!
html:
<div id="product-table" class="clear">
<div class="plan-visible">
<h3>BALANCE<em>aap</em><img class="image aap" src="http://localhost:1400/images/baap.png"></h3>
<a class="sbutton aap" href="">Go to AAP</a>
<ul>
<li>Point and click your way through the preparation of your organization’s Affirmative Action plan.<br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>trak</em><img class="image trak" src="http://localhost:1400/images/btrak.png"></h3>
<a class="sbutton trak" href="">Learn More</a>
<ul>
<li>Manage your organization’s hiring process from start to finish.<br> <br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>hub</em><img class="image hub" src="http://localhost:1400/images/bhub.png"></h3>
<a class="sbutton hub" href="">Go to HUB</a>
<ul>
<li>Access a centralized compliance information center to view, publish, and share information from your BALANCEworks applications.</li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>pay</em><img class="image pay" src="http://localhost:1400/images/bpay.png"></h3>
<a class="sbutton" href="">Go to PAY</a>
<ul>
<li>Conduct detailed compensation analyses, identify potential pay discrimination, and design a compliant pay structure</li>
</ul>
</div>
</div>
original js:
$(document).ready(function() {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
});
new, broken js:
$(document).ready(function() {
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
$('#product-table').css('446', width);
} else {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
}
});
css:
#product-table {
margin: 100px auto;
text-align: center;
.plan-visible {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
position: relative;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
border-radius: 5px ; }
.plan-visible:nth-child(1) {width: 180px;}
.plan-visible:nth-child(2) {width: 180px;}
.plan-visible:nth-child(3) {width: 180px;}
.plan-visible:nth-child(4) {width: 180px;}
.plan-hidden {display: none;}
}
/* --------------- */
#product-table h3 {
font-size: 20px;
color: $mainBlue;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: $lightGrey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* product image settings */
#product-table .plan-visible .image {
display: block;
height: 100px;
width: 100px;
margin: 15px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#product-table .plan-visible .image.aap {
border: 3px solid $aap;
}
#product-table .plan-visible .image.trak {
border: 3px solid $trak;
}
#product-table .plan-visible .image.hub {
border: 3px solid $hub;
}
#product-table .plan-visible .image.pay {
border: 3px solid $pay;
}
/* --------------- */
#product-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#product-table li {
border-top: 1px solid $lightGrey;
padding: 20px 0 10px 0;
}
/* --------------- */
/* product table specific buttons */
.sbutton {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
padding: 8px 20px;
margin: 20px 0 0 0;
display: inline-block;
background-color: $mainBlue;
color: white;
border-radius: 4px;
border: 1px solid $mainBlue;
text-align: center;
text-decoration: none;
font-size: 14px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.sbutton:hover {
background-color: #94ae3c;
color: #fff;
border: 1px solid #94ae3c;
text-decoration: none;
}
.sbutton.aap:hover {
background-color: #6f2784;
border: 1px solid #6f2784;
}
.sbutton.trak:hover {
background-color: #5c89b4;
border: 1px solid #5c89b4;
}
.sbutton.hub:hover {
background-color: #b58f2e;
border: 1px solid #b58f2e;
}
.sbutton.pay:hover {
background-color: #94ae3c;
border: 1px solid #94ae3c;
}
I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help
I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun
Project Outline
I am building a web page with a slide out menu, which works as expected and the display stays the way I expect it would during the animations to slide the menu in/out.
This is working correctly on the following browsers;
Windows
Internet Explorer (11.0.9600.17239)
Firefox (32.0)
Opera (17.12)
Chrome (38.0.2125.44 beta-m)
Mac
Opera (12.15)
FireFox (32.0)
Chrome (36.0.1985.125)
Safari (6.0.5)
iOS
Chrome (37.0.2062.52)
Safari (Iphone 5s - can't find version number)
Problem Browser
The problem seems to only be with Safari on windows (5.1.7);
The Issue
When you click to slide out the menu, it appears to reload and slide in from the right, when it is off-page to the left, so I'd assume it should come in from the left like every other browser I've tried!
When the menu is out and you press for it to slide back in, it seems to slide off to the left and then slide back out from the right and all the way off the left again.
Related jsFiddle link and code
(Link at the end of post)
JS
$(document).ready(function () {
// Set menu_out var, for clicks to activate slideIn/Out
var menu_out = false;
// Works if menu is in OR out;
$(".top_button").click(function () {
menu_move();
});
$('#menu a').click(function () {
menu_move();
});
// Only work if menu if out;
$('#content').click(function () {
if (menu_out == true) {
menu_move();
}
});
function menu_move() {
if (menu_out) {
$('#menu').animate({
'margin-left': "-71%"
}, 300, function () {
menu_out = false;
});
}
else {
$('#menu').animate({
'margin-left': "0"
}, 300, function () {
menu_out = true;
});
}
}
});
CSS
* {
font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
background: #c3c3c3;
font-weight: 300;
margin: 0;
}
#container {
position: relative;
background: black;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
#menu {
background: #000;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
color: white;
margin-left: -71%;
float: left;
}
.menu_item {
width: 100%;
border-bottom: solid 1px #333;
background: #222222;
height: 40px;
font-size: 14px;
color: #fff;
}
.menu_item a {
font-size: 14px;
font-weight: 400;
display: block;
color: white;
text-decoration: none;
padding: 12px 0 0 15px;
}
.menu_head {
height: 47px;
}
.menu_head h1 {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 14px 0 15px 10px;
margin: 0;
background: #000;
border-bottom: solid 1px #333;
}
#content {
color: white;
overflow: hidden;
}
.top_button {
border: none;
background: black;
position: absolute;
top: 11px;
left: 18px;
}
.button_strips {
width: 21px;
height: 3px;
margin: 3px 5px;
background: white;
}
.top {
height: 46px;
border-bottom: solid 1px #333;
position: relative;
}
.display {
text-align: right;
white-space: nowrap
}
p {
white-space: nowrap;
}
HTML
<div id="container">
<div id="menu">
<div class="menu_head"><h1>MENU</h1></div>
<div class="menu_item">Link 1</div>
<div class="menu_item">Link 2</div>
<div class="menu_item">Link 3</div>
<div class="menu_item">Link 4</div>
<div class="menu_item">Link 5</div>
</div>
<div id="content">
<div class="top"> <a class="top_button">
<div class="button_strips"></div>
<div class="button_strips"></div>
<div class="button_strips"></div>
</a>
</div>
<div class="display">
<!-- Add text when needed /-->
</div>
</div>
</div>
http://jsfiddle.net/L7zs39dj/
Always try to use preventDefault when using function event with link:
$('#menu a').click(function (e) {
e.preventDefault();
menu_move();
});
I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.
The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();