This seems to be so easy to do. But, I can't make it work....! So frustrated...
I googled this problem and tried to solve it for a few hours. (I read a number of posts on StackOverflow.) But, I still can't solve this problem...
The following posts cover similar issues. So, I tried to solve my problem by trying answers in the posts. But, nothing worked for me...
After reading this(jquery fadeIn not working), I tried .hide().
: didn't work...
After reading this(jQuery animations: fadeIn() hidden div, not showing content), I tried fadeIn().removeId('tutorialPages')
: didn't work...
Also, I tried display:none in CSS instead of .hide() in JS.
: didn't work...
Please keep in mind:
If you think it's a duplicate of another question, please let me know which one and how I can apply solution(s) in that question to my problem. I am new to JavaScript and it is still difficult for me to apply solutions that worked for same/similar issues to my problem. Thanks in advance! :-)
I am using Bootstrap 4.1.2. & jQuery 3.3.1.
(* you can't see the part I used Bootstrap in the following code snippet.)
Error Message:
I didn't see this error message when I wrote this code in JSFiddle. But, in this code snippet, the following code shows up when Press this! is clicked: "message": "Uncaught TypeError: $(...).fadein is not a function".
What I'm trying to do:
1. When the page loads up, only Press this! is shown.
2. Show the 1st sentence when clicking Press this!.
3. Show the 2nd sentence when clicking the 1st sentence.
4. Show the 3rd sentence when clicking the 2nd sentence.
5. Show the 4th sentence when clicking the 3rd sentence.
$(document).ready(function(){
$("#tutorialPages").hide();
$('#test').click(function(){
$("#tutorialFirst").fadein();
});
$('#tutorialFirst').click(function(){
$("#tutorialSecond").fadein();
});
$('#tutorialSecond').click(function(){
$("#tutorialThird").fadein();
});
$('#tutorialThird').click(function(){
$("#tutorialFourth").fadein();
});
});
/* #tutorialPages{
display: none;
}
*/
#tutorialGreen{
color:black;
font-weight: bold;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p id="test">Press this!</p>
<div id="tutorialPages">
<p id="tutorialFirst">This is 1st sentence.</p>
<p id="tutorialSecond">This is 2nd sentence.</p>
<p id="tutorialThird">This is 3rd sentence.</p>
<p id="tutorialFourth">This is 4th sentence.</p>
</div>
</body>
You Hide the parent element - $("#tutorialPages"), so it doesn't matter what will happen to its child elements, they won't be shown.
$("#tutorialPages") should always be shown, and show/hide only the children elements, or add $("#tutorialPages").show() to the first click event.
It should be .fadeIn() with a capital I
Related
I've made an interface for my students where they click an image and hear the description pronounced via text-to-speech, and the text description appears in a div.
Currently I'm calling the text from the image because the onclick event for the speech only works if it's on the div, and since it's a (this) event I don't understand how to combine the two.
First, is it possible, or "better" - to have a single click on the div trigger both functions, rather than splitting them between the div and the image as I've done? This is the only way I could figure out how to get it all working. So that's the first thing.
Second, I'm re-stating this code every time
jQuery(this).articulate('speak')" data-articulate-append=
How can I make this more economical? In reality I have hundreds of items, and there are a bunch more settings in between the jQuery and data-articulate. I've shortened it for this post but in reality it's much longer and repeated hundreds of times.
Last, is it possible to draw the content for the innerHTML from the data-articulate-append part of the TTS command, since it's the same in every case?
Many thanks, I've spent quite a while constructing what I have so far as I'm new to JS. I'm learning and I've tried to answer these questions myself but it's not yet within my skillset, and sorry if I'm not using all correct terminology in my post. I'm including a stripped-down version of the page here, with just the essentials. Any input is greatly appreciated.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
<script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
<link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()" src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()" src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
</div>
<div id="word">
</div>
<script>
function elephant() {
document.getElementById("word").innerHTML ="elephant";
}
function camel() {
document.getElementById("word").innerHTML ="camel";
}
function bear() {
document.getElementById("word").innerHTML ="bear";
}
</script>
</body>
</html>
You can accomplish this by:
Giving each div a class, for my example its speak. Then add an eventlistener for speak elements. Then in that event listener, you can run multiple functions. You can also get rid of the image's onclick handler.
<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>
$(document).ready(function(){
$(".speak").on("click",function(){
$(this).articulate('speak');
$("#word").html($(this).data("articulate-append"));
});
});
The problem can be seen on the website I am developing https://manu354.github.io/portfolio/
The links in the header cannot be clicked. After a quick search on SO I realized this was because my div was positioned absolute. I had positioned it absolute, so it didn't take up any space in my page layout. To fix this, multiple answers said to add a z-index : 10; to my div. This let me click the links (Pointer / hover functionality worked) and completely fixed the problems for my external links to Facebook, or Twitter. However my internal functional links e.g href="#welcome"were clickable, however they didn't move to the area they were meant to (works if the div is positioned relatively).
For example (the actual codes much longer, and uses revolution slider)
<div style="position:absolute; z-index:1;">
<a href="#welcome" target="_self" style="z-index: 10;>
</div>
Anybody know a fix for this?
Thanks
The problem may be that you didn't put the ending double quotes in the a(anchor) tag the below code can help:
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div style="position:absolute; z-index:1;">
Hello world
</div>
</body>
</html>
Well it doesnt work because your links to an id "welcome" but the div's id is "welcome_forcefullwidth".
Welcome ID
If you remove "_forcefullwidth" or add on your href "_forcefullwidth" it will work
Not to mention that the rest of the IDs are nowhere to be found
I see on your website a lot of inline style and the website is too complex as it should. The code is not that clean.
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?
I have a single page jQuery Mobile app with four "data-role='pages'" in place; so, essentially, it's one HTML doc with four "pages."
Each "page" also has a navigation footer that I am populating dynamically through javascript. I defined a variable called "theFooter," and assigned all my empty footer divs (with classes of "footer") like so:
$('.footer').html(theFooter);
Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won't apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter);
});
It works like a dream, the first time around. Let's suppose the pages are "about," "contact," "mission," and "calendar"…
You click "about"… perfect.
You click "contact".. perfect.
You can do this for each of the "pages," and each time the "pagebeforecreate" is fired and the footer looks GREAT.
HOWEVER, if now you click on, say, "about" again (or any of the ones that you've already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the 'pagebeforecreate' function again, which makes sense, because it has already been created the first time.
I've tried working with 'pageinit' and 'pagebeforeshow' firings, but have gotten nowhere.
I have tried .trigger() and .page() methods… and got nowhere.
Can someone explain exactly how to make that JQuery Mobile formatting stick?
If you call .trigger('create') on the parent element of the widget you can enhance it's markup at any point in time:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter).trigger('create');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><h3>Broken Bells</h3><p>Broken Bells</p>Purchase album </ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>