We Keep Coding

Elements to switch each other on hover

I am trying to make #switch visible after the .content element is hovered and to make #caption disappear.
Like the element IDs suggest, the #switch element should replace the caption on hover. I used Javascript to work that out, but onmouseover and onmouseout functions did not work with .content and #caption and #switch are abruptly shifting on hover.
document.getElementById('caption').onmouseover = function() {
displaySwitch()
};
document.getElementById('switch').onmouseout = function() {
hideSwitch()
};
function displaySwitch() {
document.getElementById('caption').style.display = "none";
document.getElementById('switch').style.display = "inline-block";
}
function hideSwitch() {
document.getElementById('switch').style.display = "none";
document.getElementById('caption').style.display = "block";
}
body {
margin: 50px;
}
.content {
height: 500px;
width: 100%;
border: 3px solid black;
}
#caption {
font-size: 3em;
}
#switch {
/* The element is hidden in advance. */
display: none;
}
<div class="content">
<a id="caption">Lorem Ipsum</a>
<div id="switch">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare libero et vestibulum pellentesque. In accumsan et est dapibus viverra.</p>
</div>
</div>

As per your requirement 'to make #switch visible after the .content element is hovered and to make #caption disappear', added new id box to content element. And bind onmouseover and onmouseout events to box element.
Please verify the output, is it as per your requirement or I did something different?
document.getElementById('box').onmouseover = function() {
displaySwitch()
};
document.getElementById('box').onmouseout = function() {
hideSwitch()
};
function displaySwitch() {
document.getElementById('caption').style.display = "none";
document.getElementById('switch').style.display = "inline-block";
}
function hideSwitch() {
document.getElementById('switch').style.display = "none";
document.getElementById('caption').style.display = "block";
}
body {
margin: 50px;
}
.content {
height: 500px;
width: 100%;
border: 3px solid black;
}
#caption {
font-size: 3em;
}
#switch {
/* The element is hidden in advance. */
display: none;
}
<div class="content" id="box">
<a id="caption">Lorem Ipsum</a>
<div id="switch">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare libero et vestibulum pellentesque. In accumsan et est dapibus viverra.</p>
</div>
</div>

Dropdown javascript block

I have a problem with javascript dropdown clicking menu.
I need show some content after clicking header of box.
HTML
<div id='cookiemenu'>
<div class='cookiemenu_header' onclick='ShowCookieBox()'>
Test
</div>
<div id="cookiemenu_dropwdown" class='cookiemenu_content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
</div>
</div>
CSS
#cookiemenu {
width:100%;
overflow: hidden;
display:block;
}
#cookiemenu div.cookiemenu_header {
width:100%;
display:block;
margin-top: 0px;
background-color: #0B3954;
color:#FFFFFF;
text-align: center;
height: 25px;
font-size: 20px;
line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
cursor: hand;
text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
display:block;
border:2px solid #red;
}
JS
<script>
function ShowCookieBox() {
document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}
</script>
It's not working at all. Can someone tell me why?
And the second question. Is there any chance to change the JS so It could save "status" of box (showed or hidden) in cookies? So user can leave it, close page and on the next visit it stays as he leaved it?

You have two typos.
The id of the div should be cookiemenu_dropdown on the div, but it is currently cookiemenu_dropwdown.
Also the color is just red not #red.
function ShowCookieBox() {
document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}
#cookiemenu {
width:100%;
overflow: hidden;
display:block;
}
#cookiemenu div.cookiemenu_header {
width:100%;
display:block;
margin-top: 0px;
background-color: #0B3954;
color:#FFFFFF;
text-align: center;
height: 25px;
font-size: 20px;
line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
cursor: hand;
text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
display:block;
border:2px solid red;
}
<div id='cookiemenu'>
<div class='cookiemenu_header' onclick='ShowCookieBox()'>
Test
</div>
<div id="cookiemenu_dropdown" class='cookiemenu_content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
</div>
</div>

Change your CSS rules to
div.cookiemenu_content.ShowCookieBox {
display: block;
border:2px solid red;
}
div.cookiemenu_content {
display: none;
}
The display: block from .ShowCookieBox was being overwritten by display: none from the div.cookiemenu_content rules when the ShowCookieBox class was applied.
Check the jsfiddle

Change content of div to many text fields using javascript

I want to change the content of div through javascript, but not just to one paragraph.suppose if I have three to four paragraphs,the text field should keep changing,with effect. I have written this code,but it changes only one paragraph.Its not changing again.It would also be good if it were depicted like the letter falls and content is in next letter.Please help
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function myFunction() {
document.getElementById("paraone").innerHTML="<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
}
</script>
<style>
body {
background: linear-gradient(#ccc, #fff);
font: 14px sans-serif;
padding: 20px;
}
.letter {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 26px auto 0;
max-width: 550px;
min-height: 300px;
padding: 24px;
position: relative;
width:100%;
}
.letter:before, .letter:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.letter:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.letter:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}
</style>
<body>
<button type="button" onClick="myFunction()">Click</button>
<div class="letter">
<p>Dear Friends,</p>
<p id="paraone">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui,onvallis est pretium.</p>
</div>
</body>
</html>

Your question is unclear - but I think your aim is to append text, rather than replace.
document.getElementById("paraone").innerHTML = document.getElementById("paraone").innerHTML + "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
This will set the innerHTML of the element to "the inner HTML of the element, AND <marquee behavior='scroll' direction='left'>Hello World!</marquee>. It pretty much says, "set it to what is it at the moment, PLUS .....".
http://jsfiddle.net/daveSalomon/756yxaqh/
This approach isn't ideal - the marquee, for example, will be reset each time you append something new, as the entire content of the element is being replaced. A better way would be to insert a new element in the div.
var p = document.createElement("p");
p.innerHTML = "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
document.getElementById("paraone").appendChild(p);
http://jsfiddle.net/daveSalomon/756yxaqh/1/
BTW, if you're just starting out with JavaScript, it is worth being aware of jQuery. The second code snippet could be written as:
$('#paraone').append('<marquee behaviour="scroll" direction="left">Hello World!</marquee>');

Display a Modal on button click using Jquery

I want to display my Modal on button click. Below is my code.
<input type="button" id="button1" value="Button" onclick="myFunction()"/>
<div id="openModal" class="modalDialog">
<div>
X
<h2>
Modal Box</h2>
<p>
Hello world</p>
</div>
</div>
This is my unfinished script.
<script type="text/javascript">
$(document).ready(function () {
});
</script>

show openModal div on button1 click.
$('#button1').on('click', function() {
$('#openModal').show();
});
No need of onclick="myFunction()" on button

Let's try...
Simple popup model created by using jquery, HTML, and CSS.
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 500px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 20px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Model </h2>
<p>Model content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>

Change show() to modal.show();
$('#button1').on('click', function() {
$('#openModal').modal('show');
});

You probably have to set visibility:hidden; to the div, and set it to visible onclick

Chrome gives wrong element width

I'm making a tooltip class in Mootools that depends on getting the width of the tooltip element to centre it over the target.
It works nicely in all browsers except Chrome, which comes up with two wildly different numbers for the element width on each reload of the page. When I set a width of 100 and height 20 in the CSS, the Chrome web dev inspector shows the dimensions correctly. But when I refresh the page Chrome logs out a mad figure like 1904, and my element is positioned far away to the side.
I've tried using these different ways of getting the width, either hiding the tooltip with display:none or z-index:
getDimensions()
getSize()
getStyle('width')
element.offsetWidth
all with similar results. Can any kind person suggest a workaround, or tell me why Chrome is behaving in this way?
Thanks!
Fred
Here's my JS:
Tooltip = new Class({
Implements: Events,
Implements: Options,
options: {
target: '', // Single element or array of elements
tip: '' // Element to show
},
initialize: function(options) {
this.setOptions(options);
this.setValues();
this.attachEvents();
},
setValues: function() {
this.target = this.options.target;
this.tip = this.options.tip;
this.tip.setStyle('z-index', -1); // Hide tip element
if (this.target == null || this.tip == null) return; // We don't have required elements, so return
this.showing = false;
this.tipMousedOver = false;
this.tipDimensions = this.tip.getSize(); // Getting width
console.log(this.tip);
console.log(this.tipDimensions.x);
console.log(this.tip.offsetWidth);
this.tipFx = new Fx.Morph(this.tip, {
duration: 350,
transition: Fx.Transitions.Sine.easeIn,
link: 'cancel',
onComplete: function() {
if (this.showing) this.showing = false;
else this.showing = true;
}.bind(this)
});
},
attachEvents: function() {
this.tip.addEvent('mouseenter', function(e) {
this.tipMousedOver = true;
document.removeEvents('click');
}.bind(this));
this.tip.addEvent('mouseleave', function(e) {
document.addEvent('click', this.bodyClick.bind(this));
}.bind(this));
if (typeOf(this.target) == 'element') {
this.target.addEvent('click', this.toggleTip.bind(this));
} else {
this.target.each(function(item, index){
item.addEvent('click', this.toggleTip.bind(this));
}.bind(this));
}
},
toggleTip: function(e) {
e.stopPropagation();
if (!this.showing) {
// HIdden, so show
var posn = e.target.getPosition();
var vPosn = posn.y;
var hPosn = posn.x;
var targetWidth = e.target.getSize().x;
this.tip.setStyle('z-index', 1);
this.tip.setStyle('top', vPosn - (this.tipDimensions.y + 10));
this.tip.setStyle('left', (hPosn + targetWidth /2) - (this.tipDimensions.x / 2)); // Positions middle of tip over middle of target
console.log('targetWidth: ' + targetWidth + ' tipDimensions.x: ' + this.tipDimensions.x);
this.tipFx.start({'opacity': [0, 1]});
document.addEvent('click', this.bodyClick.bind(this));
} else {
// Visible, so hide
if (!this.tipMousedOver) {
this.tipFx.start({'opacity': 0});
this.tip.setStyle('z-index', 1);
document.removeEvent('click', this.bodyClick);
}
}
},
bodyClick: function(e) {
this.tipFx.start({'opacity': 0});
this.tip.setStyle('z-index', 1);
document.removeEvents('click', this.bodyClick);
}
});
window.addEvent('domready', function(){
new Tooltip({
target: $('comments-list').getElements('.shareLink'),
tip: $('shareTip')
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="js/mootools-core-1.3.2-full-compat.js"></script>
<script src="js/mootools-more-1.3.2.1.js"></script>
<script src="comments_new_click.js"></script>
<link href="comments_new.css" type="text/css" rel="stylesheet">
</head>
<body>
<ul id="comments-list">
<!-- START COMMENT ITEM -->
<li id="CommentKey-f8b1-45f2-b4f6-68ba740ca9c3" class="commentItem">
<div class="commentTop clrd">
<span class="badges">
<img style="width: 32px; height: 32px;" src="" alt="" title="">
<img style="width: 32px; height: 32px;" src="" alt="" title="">
</span>
<a class="avatar" href="javascript:;" title="">
<img src="" alt="Photo of editor1">
</a>
<a class="username" href="javascript:;" title="">And Finally</a>
</div>
<div class="commentBody clrd">
<div class="commentOver">
<div class="submDateAndTime">26 April 2011</div>
</div>
<div class="commentSide">
<div class="likeDislike">
<a class="pluck-like alreadyvoted" href="javascript:;" title="">Like</a>
<span class="pluck-score">00000</span>
<a class="pluck-dislike" href="javascript:;" title="">Dislike</a>
</div>
</div>
<div class="commentText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a sapien vitae enim sagittis sodales at sit amet leo. Aenean cursus euismod blandit. Suspendisse potenti. Pellentesque vestibulum nisi id dui aliquet consequat. Nulla egestas tortor vel metus dapibus luctus. Nullam rhoncus ullamcorper lorem, non vehicula nulla euismod viverra. Morbi tempus dui ut ipsum interdum ut dapibus est venenatis.
</div>
</div>
<div class="commentBottom clrd">
<div class="getReplies">
See Replies
<span>2</span>
</div>
<!-- To delete -->
<div style="display:block;clear:both;float:none;height:0"></div>
</div>
<!-- REPLIES -->
<div id="nestedcommentslist-CommentKey:f8b1-45f2-b4f6-68ba740ca9c3" class="repliesWrapper"></div>
<!-- END REPLIES -->
</li>
<!-- END COMMENT ITEM -->
<!-- START COMMENT ITEM -->
<li id="CommentKey-f8b1-45f2-b4f6-68ba740ca9c3" class="commentItem">
<div class="commentTop clrd">
<span class="badges">
<img style="width: 32px; height: 32px;" src="http://z.x.co.uk/ver1.0/Content/images/store/5/6/3262-4af5-8654-ef59a25b24e1.Full.png" alt="" title="">
<img style="width: 32px; height: 32px;" src="http://z.x.co.uk/ver1.0/Content/images/store/5/6/3262-4af5-8654-ef59a25b24e1.Full.png" alt="" title="">
</span>
<a class="avatar" href="javascript:;" title="">
<img src="http://z.x.co.uk/ver1.0/Content/images/store/13/3/f175-45b8-931b-28619aadfd2a.Small.png" alt="Photo of editor1">
</a>
<a class="username" href="javascript:;" title="">And Finally</a>
</div>
<div class="commentBody clrd">
<div class="commentOver">
<div class="submDateAndTime">26 April 2011</div>
</div>
<div class="commentText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a sapien vitae enim sagittis sodales at sit amet leo. Aenean cursus euismod blandit. Suspendisse potenti. Pellentesque vestibulum nisi id dui aliquet consequat.
</div>
</div>
<div class="commentBottom clrd">
<div class="getReplies">
See Replies
<span>2</span>
</div>
<div class="share">
Report abuse
Share
</div>
<!-- To delete -->
<div style="display:block;clear:both;float:none;height:0"></div>
</div>
<!-- REPLIES -->
<div id="nestedcommentslist-CommentKey:f8b1-45f2-b4f6-68ba740ca9c3" class="repliesWrapper"></div>
<!-- END REPLIES -->
</li>
<!-- END COMMENT ITEM -->
</ul>
<div id="shareTip" class="popup">Share and things</div>
</body>
</html>
CSS:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#comments-list {
width: 480px;
margin: 20px auto;
border: 1px solid #ccc;
list-style-type: none;
padding: 0;
}
.commentItem {
margin-left: 0;
padding-left: 0;
font-size: 13px;
}
.avatar {
margin-right: 5px;
}
.avatar img {
width: 45px;
height: 45px;
}
.commentTop {
position: relative;
padding: 5px;
min-height: 48px;
background: #e8e8eb;
}
.username {
position: absolute;
top: 5px;
height: 1em;
font-size: 14px;
text-decoration: none;
}
.badges {
float: right;
}
.badges img {
margin-left: 2px;
}
.commentBody {
padding: 5px;
background: #f3f2f2;
}
.commentText {
margin-right: 75px;
line-height: 16px;
}
.commentOver {
clear: both;
float: none;
height: 14px;
padding: 0 3px 10px 0;
}
.submDateAndTime {
float: left;
color: #777;
font-size: 11px;
}
.getReplies {
float: left;
padding: 0;
}
.getReplies a {
background-color: #ED9430; /* Put elsewhere */
background-image: url("http://z.x.co.uk/images/comments-wide.png");
background-position: -508px -245px;
background-repeat: no-repeat;
display: block;
float: left;
height: 20px;
text-indent: -9999px;
width: 60px;
}
.getReplies span {
background-image: url("http://z.x.co.uk/images/comments-wide.png");
background-position: -569px -245px;
background-repeat: no-repeat;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 21px;
padding-left: 2px;
text-align: center;
width: 41px;
line-height: 19px;
}
.commentBottom {
padding: 5px;
background: #f3f2f2;
}
.share {
float: right;
}
.popup {
position: absolute;
border: 1px solid #ccc;
padding: 10px;
background: #fff;
z-index: 1;
}
.hidden {
display: none;
}
#shareTip {
width: 100px;
height: 20px;
overflow: hidden;
}
=======================================
LATER
For anyone else coming across a similar problem, I found it went away when I measured the tip element right before showing it, instead of when the object's initialised. So I changed my reveal method to:
toggleTip: function(e) {
e.stopPropagation();
if (!this.showing) {
// HIdden, so show
var posn = e.target.getPosition();
var targetPosnY = posn.y;
var targetPosnX = posn.x;
var targetWidth = e.target.getSize().x;
var targetHeight = e.target.getSize().y;
var tipSize = this.tip.getSize();
var tipPosnY = targetPosnY - (tipSize.y + 10);
var tipPosnX = targetPosnX - (targetWidth / 2);
this.tip.setStyle('z-index', 1);
this.tip.setPosition({x: tipPosnX, y: tipPosnY});
this.tipFx.start({'opacity': 1});
document.addEvent('click', this.bodyClick.bind(this));
} else {
// Visible, so hide
if (!this.tipMousedOver) {
this.tipFx.start({'opacity': 0});
this.tip.setStyle('z-index', 1);
document.removeEvent('click', this.bodyClick);
}
}
},
I also found that setPosition() is a more reliable way of positioning the element than setStyle().

If you target the recent browsers only you can use window.getComputedStyle that returns all the css properties and values as they are painted on the screen.
Or just make a workaround for chrome using it.