replacing text on hover using javascript? - javascript

Here's my fiddle demo.
Is there any javascript code to keep changing the 'Z' when hover ?
For eg. when i hover over the Z, it disappears and E takes its position from the right,and E disappears to the left and P takes its place from the right similarly this process continues to form the word Zephyr.
and when the user moves the pointer away. it should come back to Z .
.initials {
position:absolute;
background:{color:main color};
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
margin-left:20px;
font-size:20px;
letter-spacing:5px;
box-shadow:0px 2px 3px rgba(0,0,0,.15)
}

Take look to the code below. Hope this will help you. To increase/decrease speed of animation change the animate function's third parameter to your time. Here time is in ms.
$('.initials').mouseenter(function(){
for(var i=0; i<5; i++){
$('.letter:first').delay(500).animate({
marginLeft: '-=' + '70'
}, 300);
}
});
$('.initials').mouseleave(function(){
$('.letter:first').animate({
marginLeft: '0'
}, 1500);
});
.initials {
position:absolute;
background:{color:main color};
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
font-size:20px;
letter-spacing:5px;
box-shadow:0px 2px 3px rgba(0,0,0,.15);
overflow: hidden;
white-space: nowrap;
}
.letter{
width:60px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="initials">
<div class="letter">Z</div>
<div class="letter">e</div>
<div class="letter">p</div>
<div class="letter">h</div>
<div class="letter">y</div>
<div class="letter">r</div>
</div>
JS Fiddle: http://jsfiddle.net/63utadgw/16/

It is possible using CSS Animation. You can see this How to move text using CSS animation?.
No need to use JavaScript

Related

what is the best way to show the pop-up on click of an image?

Here I have a jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players.
Player can be In any position it will not be in a grid
so My question is What is the best way perform this.
I have something in my probably the wast it is like..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text.
-- I should provide a popup to the every Player and just hide and show them
or something else you can suggest.It will help me a lot.
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
margin-left:50px;
}
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>
<div id='player-popup'>
<span>Player1</span>
</div>
</div>
Thank you for spending time for me in advance Thank you.
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
<div id='player-popup' style="display:none">
<span>Player1</span>
</div>
</div>
Script:
$("img").click(function(){
var top = $(this).offset().top + $(this).width() + 2;
var left = $(this).offset().left - $(this).height() / 2;
$("#player-popup span").text("Player "+$(this).data("playerid"));
$("#player-popup").css({ top: top, left: left }).show();
});
css:
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
position:absolute;
}
Demo: https://jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set
position:absolute;

How to affect an element when it's affected by javascript

Trying to change the background color of a box when it is flipped (it would be much easier to show you what I mean: (http://iam.colum.edu/students/jordan.max/demo/demo.php). I am new to jQuery and did a tutorial, and very easily able to de-engineer the code and figure out what to do to make it do what I want. I did this with relative ease up until I tried to change the color of the background when the element is flipped. It's very odd, because when I use 'inspect element' and i click the mouse thing over the object it says I set the background in "element" but that is non-existent in my CSS. Not trying to be confusing (this probably did sound confusing which is why I gave the link), hopefully someone knows what my issue is.
demo.php
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sponsor Flip Wall With jQuery & CSS | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Sponsor Flip Wall With jQuery & CSS</h1>
<h2>Go Back to Portfolio ยป</h2>
<?php
// Each sponsor is an element of the $sponsors array:
$sponsors = array(
array('github','The biggest social network in the world.','http://www.facebook.com/'),
array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
);
// Randomizing the order of sponsors:
shuffle($sponsors);
?>
<nav id="main">
<figure class="sponsorListHolder">
<?php
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<p>'.$company[0].'</p>
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
'.$company[2].'
</div>
</div>
</div>
';
}
?>
<aside class="clear"></aside>
</figure>
</nav>
<footer>
<p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
</footer>
</body>
</html>
script.js
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
styles.css
*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:lightgreen;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:400px;
height:400px;
float:left;
margin:4px;
padding: 30px;
background: #F66F89;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsor:active{
background: #F66F89;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background: #61D89F;
color:#0196e3;
font-family: 'Oregano', cursive;
font-size: 2em;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
/* Not being used right now
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
*/
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px white;
margin-bottom:30px;
background-color: #F66F89;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
color: lightgreen;
}
a img{
border:none;
}
If I'm not mistaken you can use "color" as a parameter
elem.flip({
direction:'lr',
speed: 350,
color: 'blue', //color
onBefore: function(){}
})

container width much larger then content

I have a bunch of content that floats left in a container, and I'd like for the container to hug the content, but for some reason it's much wider then the content and I have no idea why. I have it set up in a fiddle here http://jsfiddle.net/vG8NY/6/ the red and blue bordered containers should hug the right edge of the circle.
The code is very simple and is as follows:
HTML:
<div class="hot_spot-container">
<div class="content-spot">
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-left.png" />
<div class="hotspot-content"></div>
<img class="hotspot-cir" src="http://www.klossal.com/sixred/discovery/images/hotspot-right.png" />
<br class="clear-fix" />
</div>
</div>
CSS:
.hot_spot-container {border:1px solid blue;
position:absolute;
}
.content-spot {
border:1px solid red;
display:inline-block;
}
.hotspot-cir {
float:left;
height:100%;
width:auto;
}
.hotspot-content {
float:left;
background:#ec6e47;
}
.clear-fix {
clear:both;
}
JS
$(".content-spot").css({
height:$(window).height() * ".2"
});
try this:
$(".content-spot").css({
height:$(window).height() * ".2",
width:$(window).height() * ".2"
});
when you change height of content-spot it's width still fixed and need to get resize too.
DEMO
you can use this code too:
$(".hotspot-cir").css({
height:$(window).height() * ".2"
});
DEMO
You must define the width for the element to which you have set the position: absolute; so you should use something like this:
.hot_spot-container {border:1px solid blue;
position:absolute;
/* any width you want or if you don't know the width then define auto.*/
width: 45px;
}
if you make
.hot_spot-container {display:inline-block}
instead of it having position:absolute it does what you want it to. if you want position absolute you need to give it a width
Try this
I removed your javascript and made this changes
.content-spot {
border:1px solid red;
display:inline-block;
width: auto;
}
.hot_spot-container {
border:1px solid blue;
position:absolute;
display: inline-block;
}

HTML how to tell which elements are visible?

I have seen several solutions which determine when an element is visible in the viewport whilst scrolling the page, but I haven't seen any which do this for elements that are contained in a scrolling container div as in the example here.
How would I detect the items as they scroll into view via the scrolling div? And by contrast how would I detect them if they fell out of view. In all cases the overflow elements are not hidden at the outset.
HTML
<div id="mainContainer" class="main">
<div id="scrollContainer"class="scroller">
<div id="picturesContainer"class="holder">
<div id="pictureContainer1" class="picture position1">
pictureContainer1</div>
<div id="pictureContainer2" class="picture position2">
pictureContainer2</div>
<div id="pictureContainer3" class="picture position3">
pictureContainer3</div>
<div id="pictureContainer4" class="picture position4">
pictureContainer4</div>
<div id="pictureContainer5" class="picture position5">
pictureContainer5</div>
<div id="pictureContainer6" class="picture position6">
pictureContainer6</div>
<div id="pictureContainer7" class="picture position7">
pictureContainer7</div>
<div id="pictureContainer8" class="picture position8">
pictureContainer8</div>
<div id="pictureContainer9" class="picture position9">
pictureContainer9</div>
</div>
</div>
</div>
CSS
.main{
position:absolute;
top:0px;
left:0px;
height: 200px;
width:200px;
background-color: grey;
border: 1px solid black;
}
.scroller{
position:absolute;
top:0px;
left:0px;
height: 250px;
width:250px;
background-color: lightblue;
border: 1px solid black;
overflow: scroll;
}
.picture{
position:absolute;
height: 200px;
width: 200px;
background-color: lightyellow;
border: 1px solid black;
}
.position1{
top:0px;
left:0px;
}
.position2{
top:0px;
left:200px;
}
.position3{
top:0px;
left:400px;
}
.position4{
top:200px;
left:0px;
}
.position5{
top:200px;
left:200px;
}
.position6{
top:200px;
left:400px;
}
.position7{
top:400px;
left:0px;
}
.position8{
top:400px;
left:200px;
}
.position9{
top:400px;
left:400px;
}
.holder{
position:absolute;
top:0px;
left:0px;
width:600px;
height:600px;
background-color:lightgreen;
}
include jQuery library on page first.
function getObjDims(obj){
if (!obj) return false;
var off = $(obj).offset();
var t = {
top:off.top,
left:off.left,
width:$(obj).width(),
height:$(obj).height()
};
return {x1:t.left, y1:t.top, x2:t.left+t.width,y2:t.top+t.height}
};
function testInside(pic,box){
var d=getObjDims(pic);
return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1;
};
$(document).ready(function(){
var inside={};
var port=$('#scrollContainer');
var box=getObjDims(port);
$(window).resize(function(){
box=getObjDims(port);
});
$(port).scroll(function(){
var str=[];
$('.picture').each(function(i){
var oldState = inside[this.id]!=undefined?inside[this.id]:0;
var newState = testInside(this,box);
inside[this.id]=newState;
if (oldState!=newState)
switch (newState){
case 1:str.push(this.id);break;// go IN
case -1: break;// go OUT
}
});
$('#picStatus').text(str.join(', '));
});
});
Add in HTML for results output:
<div style='margin-top:280px;'>Pictures in window (numbers):</div>
<div id='picStatus'></div>
It is code based on object's coords, witch are recalculated on scroll event. There are some things to know. IE and, seems to be, Opera takes into consideration width and height of scrollbars themselves, that demands curtain code tuning. I just have suggested solution direction and did not spent much time for debugging this.
And yet, maybe will be useful following (from jquery api about offset):
Note: jQuery does not support getting
the offset coordinates of hidden
elements or accounting for borders,
margins, or padding set on the body
element.
http://www.quirksmode.org/mobile/viewports.html discusses the issues around viewports, determining their dimensions, and calculating element bounds relative to a viewport's coordinate frame. Part 2 of that blog post then goes into the implicit viewports in mobile browsers. He doesn't give code that answers your question exactly, but it's definitely relevant and worth a read.

Dynamically changing height of div element based on content

I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }

Categories