I am trying to place a live clock into a body of text. I need it to flow as if it were just part of the text, but still be live to the local device. Playing around in Adobe Muse I have been able to get a clock into the text, but it segregates itself to its own line rather than flowing like part of the paragraph.
Following is the code Muse produced. I assume I need to make a change to either actAsInlineDiv normal_text, or actAsDiv excludeFromNormalFlow, or both, but how?
<p id="u3202-10"><span class="Character-Style">You look at the clock on this device and it reads </span><span class="Character-Style"><span class="actAsInlineDiv normal_text" id="u13390"><!-- content --><span class="actAsDiv excludeFromNormalFlow" id="u13388"><!-- custom html --><html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
// add a zero in front of numbers<10
m=checkTime(m);
document.getElementById('txt').innerHTML=h+":"+m;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
</span></span></span><span class="Character-Style">As a result you believe that this is the time. As it happens this is the time but unknown to you your device's clock has stopped functioning and is stuck. Does your true belief that this is the time count as knowledge?</span></p>
I don't know about Muse, but if all you want is a clock of the current time running inline with some text you could do this:
window.onload = displayTime;
function displayTime() {
var element = document.getElementById("clock");
var now = new Date();
var options = {hour: '2-digit', minute:'2-digit'};
element.innerHTML = now.toLocaleTimeString(navigator.language, options);
setTimeout(displayTime, 1000);
}
The current time is <span id="clock"></span> and it's inline with text.
EDIT
I added these two lines to remove the seconds from display as you requested in your comment.
var options = {hour: '2-digit', minute:'2-digit'};
element.innerHTML = now.toLocaleTimeString(navigator.language, options);
Related
I'm using the below script to load a fullwidth Divi slider randomly - so the same slide doesn't always load first. Now I wonder if anyone can suggest an edit.
I would like to prevent some slides from loading first, and/or to just weight some slides so they display more frequently than others. Any ideas?
Thanks!
'''
<script type="text/javascript">
jQuery(document).ready(function(){
var item = document.querySelector('.et_pb_slider .et_pb_slides');
if(item!=null){
for (var i = item.children.length; i >= 0; i--) {
item.appendChild(item.children[Math.random() * i | 0]);
}
}
});
</script>
'''
I am dynamically creating elements on a web page which I want to print. I want a page break if the element can't fit in the rest of the A4 size paper.
Example is this question: Force an element to take exactly half of available height in print media
In the picture, A broken element is appearing on first page, which should actually go on the second page.
How can I force a page break if the element does not fit in this page.
**What I tried: **
I tried to use css page-breakafter` property, with the following code:
$(document).ready(function(){
$(".row").each(function(){
if($(this).height()>$(document).height()/2){
$(this).after('<div style="page-break-after:always"></div>');
}
});
});
But it does not work.
Here is a JsFiddle
I noticed in your fiddle that you have applied page breaks only after a few rows. The problem with your jQuery code is that, the $(document).height() will return a huge value compared to each row. In your case, document height = 3861 while each row is only 537. Hence 537 is never greater than 3861/2. Revisit the exact condition you need to apply the page break. I tried window.height instead and it works.
Note: You can only see the difference in print preview
EDIT:
Could you remove all the page break div's you manually added and try the below script.
What I tried is to capture the previous element height and then calculate if he page break is necessary.
For this purpose, I have kept a maxHeight of the document to be 1024 considering how much an A4 sheet can take up. Feel free to adjust the maxHeight according to your paper size.
$(document).ready(function(){
var prevRowHeight = 0;
$(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1024;
var eachRowHeight = $(this).height();
if((prevRowHeight + eachRowHeight) > maxHeight){
$(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
}
prevRowHeight = $(this).height();
});
});
Previous answer was good but there is a bug. You must need total_height. Please Check this I think this code help you. I use this code for a hospital management project for printing system. Thank you.
jQuery(document).ready(function(){
var prevRowHeight = 0;
var total_height = 0;
jQuery(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1000;
var eachRowHeight = jQuery(this).height();
total_height += prevRowHeight + eachRowHeight;
alert('now : '+total_height +' , Was: '+ prevRowHeight);
if(total_height > maxHeight){
jQuery(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
now_height = 0;
}
prevRowHeight = jQuery(this).height();
});
});
I'm trying to reveal content using hoverIntent without writing specific conditions for each id. I would like to have the id passed to the mouse in settings so I can reveal content selected by adding characters to the id + '-x'.
I have tried a few ways to get the div I'm hovering over but these usually end up returning all the information of all the divs with the class "box".
Is there a parent, child thing I should be doing? I don't understand it really but feel like this is the situation it would helpful in.
<div id="id-first-div" class="box">Trigger 1</div>
<div id="id-second-div" class="box">Trigger 2</div>
<div id="id-second-div-x" class="hide">Hidden Bullet 1</div>
<div id="id-first-div-x" class="hide">Hidden Bullet 2</div>
<script>
$(document).ready(function() {
$("#id-first-div").hoverIntent(slide_right_settings);
$("#id-second-div").hoverIntent(slide_right_settings);
});
var slide_right_settings={
sensitivity: 4,
interval: 1500,
timeout: 5000,
over: mousein_triger,
out: mouseout_triger
};
function mousein_triger(){
var id = this.id; // I'm pretty sure I'm going wrong here
$(id + '-x').addClass('reveal');
$(id + '-x').removeClass('hide');
}
function mouseout_triger() {
$(id +'-x').addClass('hide');
$(id +'-x').removeClass('reveal');
}
</script>
//hover intent opening and closing
var slide_right_settings={
over: mousein_triger,
out: mouseout_triger
};
//default id is home
var id = "home";
function mousein_triger(){
//updates id to the one triggering
id = $(this).attr('id');
$('#' + id + '-x').addClass('reveal');
$('#' + id + '-x').removeClass('hide');
}
function mouseout_triger() {
$('#' + id +'-x').addClass('hide');
$('#' + id +'-x').removeClass('reveal');
}
Still not sure if this is the best way to achieve this, but it's working.. I'm sure it could be improved a lot.
place the var id = this.id; outside the function
I have an iframe that I use to display the main content of my webpage; however, I would like to make the IFRAME scroll regardless of where the mouse is pointing. I do not want my visitors to be confused by not being able to scroll unless their mouse is over the iframe. Is this possible? To scroll the iframe with the mouse hovering anywhere over the body?
I won't link any code, because the only relevant code I have is the < iframe>< /iframe> tag.
(the body itself is not scrollable with scrollbars hidden)
Alright. I put together a rather quick and dirty solution for this which includes the following steps:
Add an "id" to your <iframe> element. (In my example I used id="myFrame")
Attach the jQuery Mousewheel plugin to the header of your html page along with the latest jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
Finally add the following javascript code at the end of the html body or after the iframe itself.
<script type="text/javascript">
var scrolloffset = 30; // amount of scrolling per mousewheel step
var myFrame = $('#myFrame'); // the iframe ID
var frameScrollPosition = 0;
$(window).mousewheel(function(event,delta){
// reset stored offset so that it matches with iframe's
frameScrollPosition = myFrame.contents().scrollTop();
var frameHeight = myFrame.contents().height() - myFrame.height();
if(delta > 0){
var newPosition = frameScrollPosition - scrolloffset;
} else {
var newPosition = frameScrollPosition + scrolloffset;
}
if(newPosition < 0){
newPosition = 0;
}
if(newPosition >= frameHeight){
newPosition = frameHeight;
}
frameScrollPosition = newPosition;
myFrame.contents().scrollTop(frameScrollPosition);
});
</script>
Make sure you download the plugin and not call it from github like me. It was just for testing and proof of concept.
I'm new to Stack Overflow and also relatively new to HTML5 programming. I'm writing something (for Safari, primarily) where the logic is driven by the events which get fired out when webkit animations complete. If I start a number of animations of the same length simultaneously, I need some idea of the order I can expect their completion events to fire. Example:
<!DOCTYPE html>
<html>
<head>
<style>
#-webkit-keyframes slideRight {
from { left: 0; }
to { left: 100px; }
}
</style>
</head>
<body>
<script type="text/javascript">
var square = function(yPos, color){
var myDiv = document.createElement("div");
myDiv.style.width = "20px";
myDiv.style.height = "20px";
myDiv.style.top = yPos + "px";
myDiv.style.backgroundColor = color;
myDiv.style.position = "absolute";
document.body.appendChild(myDiv);
var squareInterface = {
onAnimEnd: function(event){
console.log(myDiv.style.backgroundColor + " square finished animating");
},
startAnim: function(){
myDiv.style.webkitAnimationName = "slideRight";
myDiv.style.webkitAnimationDuration = "2s";
myDiv.addEventListener('webkitAnimationEnd', this.onAnimEnd);
}
}
return squareInterface;
}
var myRedFoo = square(0, "red");
var myBlueFoo = square(30, "blue");
myRedFoo.startAnim();
myBlueFoo.startAnim();
</script>
</body>
</html>
So, I'm creating a red square and a blue square in JavaScript, and (in Safari and Chrome) kicking off animations to move them to the right, and to print to the console when they're done. The blue square is always the first to say that it's finished animating. From playing around it seems to have nothing to do with the order in which the animations were started, or the positions of the squares, but the order in which they're created. "Simultaneous" event callbacks seem to occur on the most recently created element first, followed by the older elements.
My question is can I rely on this behaviour? Is it guaranteed in any standards, or is it likely to change depending on the browser, or the phase of the moon? If the event order can't be guaranteed, what strategies would you recommend for coping with that?
I can say that this is probably system dependent. I'm using OSX Lion, and in both Chrome and Safari the "red" event is logged before the "blue" one.
If you want to hack it out so that you can be more confident in the timings, do something as such:
function startRedFoo(){ myRedFoo.startAnim() };
myBlueFoo.startAnim();
setTimeout(startRedFoo, 10); //Ten is as small as you can go.
You would think that you would be able to set the timeout function to myRedFoo.startAnim but that prevents the messages from being logged.
I can still imagine potential timing issues with this though, so it's not fool proof.