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>
Related
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(){}
})
I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
Is it possible to set body background image as a link? So when somebody click on anywhere outside the content area, it will go to another website.
Something like this http://jsfiddle.net/xzuEA/2/ , you just need to add background block with onclick event
<div id="fakebody">
</div>
html, body {
width:100%;
height:100%;
}
div#fakebody {
width:100%;
height:100%;
background:red;
}
$(function() {
$("#fakebody").click(function() {
window.location = "http://www.google.com/";
});
});
Can be done in html/css only:
<body>
<!-- YOUR WEBSITES HTML -->
</body>
CSS:
#background {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:0; // NOTE: YOUR OTHER ELEMENTS MUST BE ABOVE z-index: 0 TO MAKE IT A BACKGROUND
background:url(your/path/to/background-image.png);
}
I'm feel very irritated with div alignment problems on window resize. I would like to wrap elements inside div so that they won't come out of their exact positions after window resize.Is there a way possible to wrap elements inside parent <div> using Javascript. Also suggest any best ways possible to overcome this using javascript like handling resize() & zoom() events. If not suggest solutions possible by using Jquery.
HTML:
<div id ="top-left"></div>
<div id ="top-right"></div>
<div id ="bottom-left"></div>
<div id ="bottom-right"></div>
css:
div{
width:50px;
height:50px;
background-color:red;
position:absolute;
}
#top-left{
top:0;
left:0;
}
#top-right{
top:0;
right:0;
}
#bottom-left{
bottom:0;
left:0;
}
#bottom-right{
bottom:0;
right:0;
}
div#container{
position:relative;
border: 2px solid blue;
width:300px;
height:300px;
background:green;
}
jQuery:
$(document).ready( function(){
$('body').append('<div id="container"></div>');
$('body div').not('#container').each(function() {
var html = $(this);
$('#container').append(html);
});
});
Demo:
http://jsfiddle.net/x8Wnw/
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 */ }