In my rails app have this code:
window.onload = ->
$("#mycontainer").typewriter()
$("#div1").fadeIn("slow")
which acts on this:
<blockquote class="pull-left">
<p id="mycontainer">A mathematician, scientist, and engineer are each asked: "Suppose we define a horse's tail to be a leg. How many legs does a horse have?" The mathematician answers "5"; the scientist "1"; and the engineer says "But you can't do that! </p>
<small id="author">Emmanuel Mensah </small>
</blockquote>
Now, I can clearly see the window.onload function which I understand to let the jquery kick in right after the page loads. I realised that first, the page loads and then for a split second, I can see the (whole) text BEFORE the text effects comes in (effect is a typewriting which means text should not be visible but typed key after key...to the right). But I am wondering how to this so that when the page loads, I don't see the text at all but just after the jquery kicks in.
I tried to add this CSS style: display:none to the <p> tag but this changes nothing. Can someone help me here?
You need to hide them at first to see the showing effect.
window.onload = ->
$("#mycontainer").hide()
$("#div1").hide()
$("#mycontainer").typewriter()
$("#div1").fadeIn("slow")
Try body onload instead.
<body onload="myfunction()">
<blockquote class="pull-left">
<p id="mycontainer" style="display:none;">A mathematician, scientist, and engineer are each asked: "Suppose we define a horse's tail to be a leg. How many legs does a horse have?" The mathematician answers "5"; the scientist "1"; and the engineer says "But you can't do that! </p>
<small id="author">Emmanuel Mensah </small>
</blockquote>
</body>
function myfunction() {
$("#mycontainer").show();
$("#mycontainer").typewriter();
}
Related
I am facing an issue in converting HTML text into word doc supporting format so I can generate a doc file using docx.js lib. Right now HTML tags are showing up as a plan text.
and this is the lib I am using: https://docx.js.org/
<p>
<strong>voice:</strong>
During an address to Congress, George Washington said “If you can’t send money, send cigars.” [pause] Or something like that. [pause] There’s no question that Washington was a wise man. He knew that premium quality cigars are worth their weight in gold. And if he were alive today, he’d be running the country from the lounge at
<strong>No Name Cigar Company.</strong>
Where the conversation never comes to an end – and neither does their premier cigar selection. Mingle with legends – at
<strong>No Name Cigar Company.</strong>
</p>
<p> </p>
<p>Visit them online at <strong>NoNameWebsite.com</strong></p>`
Hi Please Use googoose
this works very fast and without glitch
here is the complete code example
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/aadel112/googoose#master/jquery.googoose.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var o = {
filename: 'test.doc'
};
$(document).googoose(o);
});
</script>
</head>
<body>
The content that is rendered to a Word doc will need to be wrapped in a div with the classname googoose-wrapper, by default.
<div class="googoose-wrapper">
<p><strong>voice:</strong> During an address to Congress, George Washington said “If you can’t send money, send cigars.” [pause] Or something like that. [pause] There’s no question that Washington was a wise man. He knew that premium quality cigars are worth their weight in gold. And if he were alive today, he’d be running the country from the lounge at <strong>No Name Cigar Company.</strong> Where the conversation never comes to an end – and neither does their premier cigar selection. Mingle with legends – at <strong>No Name Cigar Company.</strong></p> <p> </p> <p>Visit them online at <strong>NoNameWebsite.com</strong></p>
</div>
</body>
</html>
In this fiddle, I want to hover over "Your Truly" and have the image appear, while the text disappears. Does an app have to be initialized for this to work? I didn't think it did...
The angular HTML look like this (I didn't move my whole app in here, just trying to get this part to work)
<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'">
<span ng-hide="imgsrc.show"
ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"
ng-mouseout="imgsrc.hide">
Yours Truly
</span>
<img ng-src="{{imgsrc}}"/>
</a>,
It is possible to make something like this work without making a proper controller, though I'd discourage it. That said, I went ahead and got it working anyway:
<p class="text-justify last-body" ng-app>
This growing collection of studies, curated by
<a ng-init="imgsrc={
src: 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg',
show: false,
};">
<span ng-mouseover="imgsrc.show = true" ng-mouseout="imgsrc.show = false">
Yours Truly
</span>
<img ng-src="{{ imgsrc.src }}" ng-show="imgsrc.show" />
</a>,
is focused primarily
on studies dealing with eh tohp ah key pig*. As a fan of mooshoo and aigeiaig, I'm open to
working with any dataset ranging from yakdkat studies to lakuktauka. If you would like
to submit a study for publishing, or if you have any questions about a particular study,
please feel free to Contact Me. Thank you for visiting, and happy wamotiem!
</p>
This will display the image when you hover over "Yours Truly", and hide the image when you move the mouse away. The main thing preventing your example from working was the missing ng-app directive from the top-most element. Aside from that, I also cleaned up some of the logic to make it easier to reason out what was going on.
Here's a JSFiddle if you want to see it in action: https://jsfiddle.net/kv4qvu3w/2/
I am trying to make a random quote generator then use a tweet button to tweet the current quote (the content of the element) but I can only get the twitter api to tweet the url, I have researched and read but am completely stuck any help would be wonderful!
Here is HTML with twitter button
<body>
<h1>J.R.R. Tolkien Quote Machine!</h1>
<div id ="stuff">
<img id="image" src="http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsukywovht.jpg">
<h2 id = "quotetext">Press the button to discover the first quote.</h2>
<button id = "quotebutton" onclick = "randomQuote()">Get a new quote... </button>
</div>
<!--tweet the url-->
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
here is my javascript...
var myQuotes = [
"'Faithless is he that says farewell when the road darkens.'",
"'All we have to decide is what to do with the time that is given us.'",
"'If more of us valued food and cheer and song above hoarded gold, it would be a merrier world.'",
"'Never laugh at live dragons.'",
"'There is some good in this world, and it's worth fighting for.'",
"'Faithless is he that says farewell when the road darkens.'",
"'The world is indeed full of peril, and in it there are many dark places; but still there is much that is fair, and though in all lands love is now mingled with grief, it grows perhaps the greater.'",
"'Many that live deserve death. And some that die deserve life. Can you give it to them? Then do not be too eager to deal out death in judgement.'",
"'Not all those who wander are lost.'",
"'I will not say: do not weep; for not all tears are an evil.'",
"'Little by little, one travels far'",
"'Courage is found in unlikely places.'",
"'It's the job that's never started as takes longest to finish.'",
"'There is nothing like looking, if you want to find something. You certainly usually find something, if you look, but it is not always quite the something you were after.'",
"'The wide world is all about you: you can fence yourselves in, but you cannot forever fence it out.'",
"'It may be the part of a friend to rebuke a friend's folly.'",
]
var myImages = [
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord-of-the-rings-quiz-orig_zpsse5k5mrg.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/12d212546fbb50f1f278db8d3c893b05_zpsqzlpz91p.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres1_zpsdsmi4elj.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/samwise-gamgee_zpsrhuv2u33.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images2_zpsgyxpexod.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/gollum_zpsy583lrzv.png",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsonmjtyty.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imagesq_zpsfgguq2ha.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres_zpsesxdolbh.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zps9qwoibjr.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgresw_zpseizew5r4.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/The-Hobbit-An-Unexpected-Journey-2012-1_zpsjxz1lw9i.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/middleearthlargelargerstill_zpscp5xil1m.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord_of_the_rings-_the_fellowship_of_the_ring_wallpaper_15_1024_zpssafzudw9.jpg"
]
function randomQuote() {
var randomNumber = Math.floor(Math.random() * (myQuotes.length));
document.getElementById("quotetext").innerHTML = myQuotes[randomNumber];
document.getElementById("image").src = myImages[randomNumber];
}
I am a bit stumped on this. I just started working with javascript and I am having a little trouble getting this to work. Basically I have links within paragraphs that expand when clicked using javascript. However, I would like to add an effect to this expansion such as fading or scrolling. Previously, I have only added effects to div classes but this isn't a div. Anyway here is my code thanks!
Javascript:
function reveal(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
html:
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="/../default.css"/>
<script type="text/javascript" src="/jscript/function.js"></script>
</head>
<link rel="shortcut icon" href= "/../images/favicon.png"/>
<link rel="icon" href="/../images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="/../images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Videos</li>
<li>Other Resources</li>
</ul>
</div>
</div>
<div class="sideContent">
<div class="sideTitle">
<h3>Table of Contents</h3>
</div>
<div class="sideLinks">
<ul>
<li>i. Introduction</li>
<li>1. What is Fusion?</li>
<li>2. Hazards and Safety</li>
<li>3. Vacuum Chamber</li>
<li>4. Inner Grid</li>
<li>5. Outer Grid</li>
<li>6. Vacuum System</li>
<li>7. Electrical System</li>
<li>8. Achieving Fusion </li>
<li>9. Putting it all Together</li>
<li>10. Great, Now What?</li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentTitle">
<h1>Star in a Jar - A How-To Guide</h1>
<h2>Introduction</h3>
</div>
<div class="contentText">
<!--Paragraph One-->
<p>
Why would anyone want to build a <q>star in a jar</q>? Is it because they want to feel like a mad scientist? Because they want to impress their friends or peers? Although these are all possible reasons, the main reason why people have been building and researching these incredible devices is because quite frankly, we are running out of energy solutions. If we don't have a working solution in the next 20-50 years, we either won't have energy or the little energy we produce will be outrageously expensive. The energy that we consume is almost directly matched with the human exponential growth model and we simply cannot be sustained with conventional energy production methods. The more people that are aware or interested in this technology, the faster we will be able to develop fusion based energy solutions.
</p>
<!--Paragraph Two-->
<p>
Since this is an advanced topic and this writing will use highly technical lexis, I will write in such a way as to target multiple audiences. I understand that some of you reading this are doing so because you are planning on building or already built a fusion device and are looking for more useful information to further develop and experiment with your device. On the other hand, some of you may be reading this from a purely academic standpoint and have nor the intention or means to build such a device. That is perfectly fine! If the former, and you are familiar with the terms and already have an understanding of the concepts in this text, then you can read it without expanding the text for a better tailored experience. However, if the latter, and you are unfamiliar with the terms of this field, I have developed the writing on the site to be dynamic and interactive. Every word or phrase you see that is in orange, can be expanded into an explanation when clicked. Try it out with the following phrase!
What is Tritium?.
<a id="para1" style="display:none">
(Tritium is a radioactive isotope of hydrogen with one proton and two neutrons)
</a>
I implemented this feature because I realize that this writing will be read by many different audiences with their own unique purposes for reading. As the writer, I strive to make this writing dynamic to fit their needs independently without compromising convince or enjoyment. Although the main purpose of this tutorial is to give a detailed analysis of the device and its workings in a tutorial based format, it is also to educate and address the needs and wants of the reader and hopefully, in the process raise awareness to a phenomenal technology that will change the world.
</p>
<!--Content Image-->
<div class="contentImage">
<img src="/../images/intro1.jpg" style="width:300px;height:300px">
</div>
<!--Paragraph Three-->
<p>
This tutorial is not going over any new exotic technology. The particular machine described uses very basic principles of classical physics and has been around since the mid 60's. Depending on the materials you have on hand, your results will vary. I can guarantee at the bare minimum, you will have a working demo fusor if you follow this tutorial. A demo fusor essentially does everything a normal fusor does, with the exception that no fusion of atoms is occurring. It is called demo because it is typically much easier to build and operate safely and is used to demonstrate the operation of a fusor. The picture on the right is of a preliminary run of my first demo fusor.
</p>
<!--Paragraph Four-->
<p>
<b>WARNING:</b>
</p>
<!--Paragraph Five-->
<p>
Before we begin the tutorial, I would like to point out that although this machine is of a very simple design and can be built from essentially junk, does NOT mean it is by any means safe. The minimum operating voltage for most demo fusors are 2-6kv and 10-30kv for fusors achieving fusion reactions. High voltages are extremely dangerous and the high voltage supplies discussed can and most likely will kill you if an accident occurs or you misuse them. The Hazards and Safety section will go into more detail about the all possible hazards presented and how to deal with them accordingly.
</p>
<!--Paragraph Six-->
<p>
Understand that this is a dangerous experiment that if done improperly, has the potential to harm or kill you or others who do not follow proper safety measures. I do not take any responsibility for death, injury, property damage, potential outrageous energy bills, blown breakers, glowing in the dark, fecaled pants, becoming a green hulk when angry, or failure of experimenter to hold sufficient health, liability or property insurance.
</p>
</div>
<div class="contentSelector">
>>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright # 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>
Your question isn't entirely clear... but it seems like you're just asking how to do animations in JavaScript.
Here's some code you can use for fading in (taken from http://youmightnotneedjquery.com/):
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
fadeIn(el);
or, if you are using jQuery (not sure if the tag was listed correctly or not), a similar function has already been made for fading in the library:
$(el).fadeIn();
Do note that a fade in in this way requires you setting opacity values (not display values).
You also mentioned in your question "Previously, I have only added effects to div classes but this isn't a div". Classes are just one way to implement CSS styles, if you've used CSS animations before, the same CSS animation will work for nearly any element (there are cases where they won't), you just have to give that element a class with the animation you want. As this wasn't asking for CSS in specific, you can take a look here for more information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations or at this question for fade in specifically: Using CSS for fade-in effect on page load
I'm working on a web app that allows a user to select some text, click a button, and save the highlighted text. This works great in desktop browsers, (chrome for this example), but in iOS I'm having issues with the native text selection, where the user can change the selected text.
Here is the JsFiddle showing the issue (issue only exists in iOS): http://jsfiddle.net/JasonMore/gWZfb/
User starts text selection
User expands their text selection, and clicks "Show the selected text above"
Only the first selected word "The" shows up, even though I want "The Path of the righteous man"
1 Begin
2 Select Text and hit button
3 Only "The"
Here is the JS I am using:
$(function() {
$('#actionButton').click(function() {
$('#result').text(selectedRange.toString());
});
$('#slipsum').on('mouseup touchend','p', function() {
getSelectedRange();
});
});
var selectedRange = null;
var getSelectedRange = function() {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
};
HTML:
<h3>Selected Text:</h3>
<p id="result">
</p>
<br/>
<p>
<input type="button" id="actionButton" value="Show the selected text above" />
</p>
<!-- start slipsum code -->
<div id="slipsum">
<h1>Is she dead, yes or no?</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>So, you cold?</h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<h1>I'm serious as a heart attack</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>Is she dead, yes or no?</h1>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
<h1>Is she dead, yes or no?</h1>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code -->
To anyone who stumbles upon this issue in the future, here is the resolution:
http://jsfiddle.net/JasonMore/gWZfb/
$(function() {
$('#actionButton').click(function() {
if (selectedRange) {
$('#result').text(selectedRange.toString());
clearInterval(timer);
}
});
timer = setInterval(getSelectedRange, 150);
});
var timer = null;
var selectedRange = null;
var getSelectedRange = function() {
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
}
};