How to affect an element when it's affected by javascript - 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(){}
})

Related

How to add content that already exists on another #div:before

How to add content that already exists on another #div:before
because the existing div will I set as a fixed position
#text-1{
width:100%;
text-align:center;
/* visibility:hidden; */
/* position:fixed; */
}
#text-2 {
width:100%;
text-align:center;
}
#text-2:before {
content:"Equal to the contents of #text-1";
width:100%;
text-align:center;
color:#ff0000;
position:absolute;
width:100%;
left:50%;
background-color:#e3e3e3;
border-top:1px solid #999999;
margin-left:-50%;
margin-top:18px;
font-style:italic;
}
<div id="text-1">Content Text-1</div>
<div id="text-2">Content Text-2</div>
You need to use jquery for this. First include jquery library in your html file if it is not there and then add below javascript code inside your head tag:
<script type="text/javascript">
$(document).ready(function(){
var contents = $("#text-1").html();
$("#text-2").html(contents);
});
</script>

replacing text on hover using 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

Collapse/accordion style for modules in WP

I want to modify my page's right sidebar to work like on www.novaator.ee's.
A bit of code i got from novaator.ee site:
/* accordation menu */
<script type="text/javascript">
function accordMenu(){
jQuery("#rightMenu .rContent").hide();
jQuery("#rightMenu .body-lehed").show();
jQuery('#rightMenu .rHeading').click(function() {
jQuery('#rightMenu .rContent').slideUp('normal');
jQuery(this).next().slideDown('normal');
});
}
</script>
and CSS
/* Accordation menu */
#rightMenu{
margin-bottom:11px;
width:214px;
}
#rightMenu .link{
font-weight:bold;
color:#6b6f72;
text-decoration:none;
margin-right:10px;
margin-left:14px;
font-style:italic;
font-size:11px;
padding-bottom:8px;
}
#rightMenu .link:hover{
text-decoration:underline;
}
#rightMenu .rHeading,.rHeading2{
background:#14588f;
color:#f6f6f6;
font-weight:bold;
font-size:15px;
padding:5px 20px 4px 20px;
cursor:pointer;
margin-bottom:2px;
height:18px;
}
#rightMenu .rHeading:hover,.rHeading2:hover{
text-decoration:underline;
color:#ffffff;
}
#rightMenu .cat-video2010,#rightMenu .cat-video2010 a,
#rightMenu .cat-video2011,#rightMenu .cat-video2011 a,
#rightMenu .cat-video,#rightMenu .cat-video a{
background:#ef9d37;
color:#f6f6f6;
text-decoration:none;
}
#rightMenu .rContent{
border:1px solid #dddddd;
border-top:0;
margin-top:-2px;
padding-left:6px;
padding-top:11px;
}
#rightMenu .question{
border-left: 5px solid #f6b439;
padding: 2px 5px 2px 9px;
line-height:16px;
}
#rightMenu .asnwerer{
font-size:13px;
font-weight:bold;
color:#c5c5c5;
padding-left:14px;
margin-top:4px;
margin-bottom:-5px;
}
#rightMenu .asnwer{
padding-left:14px;
line-height:16px;
}
My question is , where should i add these pieces of code (to style.css and to ... ) ?
What sort of other modifications might i have to do?
Keeping in mind that on my site the right sidebar is for modules(so the javascript should work for modules) and right now theres two woocommerce modules running.
I think i need to change the script a bit too , to function with fresh-lite theme.Since im no at home with javascript , i was hoping for someones further assistance.
What i've done so far , is that i've added css part of it to style.css and tryed to add script part to functions.php , but after done so , it will load blank pages(which ever URL i use).So i guess i have to use something like childtheme... ?
To be more accurate , i need all widgets(not modules) to work the same way.Accordions root should be the title of widget and it should work on click not on hover.
As it is, you need to include that script after the HTML it applies to. So look for a footer template or other location low in the page.
If you modified it slightly, like so, you can put it anywhere in the templates.
<script type="text/javascript">
jQuery(function() { // wait for the DOM to finish loading
function accordMenu(){
jQuery("#rightMenu .rContent").hide();
jQuery("#rightMenu .body-lehed").show();
jQuery('#rightMenu .rHeading').click(function() {
jQuery('#rightMenu .rContent').slideUp('normal');
jQuery(this).next().slideDown('normal');
});
}
});
</script>
All this assumes that the ID and class values that are in your CSS are also in place in your HTML.

Scrolling a DIV inside a DIV container with Javascript

I have a DIV container in which I have a SVG document (bigger than DIV). In this same container I have another DIV (lets call it DIV#2) that moves over my SVG, to help people locate some feature. When I scroll the container DIV I would like DIV#2 to stay anchored on the same position on my SVG, so as to be coherent my the new position of the selected feature (cf Rect_Follow() function below).
Can someone help me troubleshooting that without the use of jQuery?
Here's a small portion of the code:
CSS:
<style type="text/css">
<!--
div.SVG_container {
height:800px;
width:900px;
margin-top:250px;
overflow:scroll;
}
div.select_div {
position: absolute;
height: 98px;
width: 98px;
background: #CCF;
border: 1px solid #AAD;
text-align: center;
font-size: 10px;
border:1px solid black;
filter:alpha(opacity=60); /* for IE */
opacity:0.6; /* CSS3 standard */
}
-->
</style>
HTML/JavaScript:
<head>
<!-- ... -->
<script type="text/javascript">
function Rect_Follow(obj){
var rect = document.getElementById('arect');
rect.style.top = obj.scrollTop;
}
</script>
</head>
<body bgcolor="white">
<div id="DivCont" class="SVG_container" onscroll="Rect_Follow(this)">
<div id="arect" name="arect" class="select_div"></div>
<object id="aSVG" data="out.svg" style="margin-top:0px;overflow:hidden;" />
</div>
<!-- ... -->
</body>
Add position:relative to .SVG_container, and remove the JavaScript.
I hope this is what you mean.

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