I decided to try my hand in jQuery $('#tabs').tabs(); and make my tabs vertical. I ran into the problem of not having the content show upon selection of a tab. An example of the problem is here - JSFIDDLE I know there's clearly something I'm missing. I tried looking at the Jquery UI documentation, but was still unaware of what I was doing wrong. I would be grateful to know why I'm having this problem and any other tips would also be greatly appreciative
Try this example: http://jqueryui.com/tabs/#vertical
You need some extra CSS (your JS Fiddle isn't loading the jQuery UI CSS) for example:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
Requires extra fiddling, but here's an updated fiddle
Two problems:
You have duplicate element ids. And the first instance of each id points to the link, not the content. Remove the ids from the links.
The tabs widget is dependent on CSS. Add the base stylesheet in and it works.
jsfiddle.net/Kxtvg/280
To get the layout you want, you'll have to start with the base stylesheet and modify it.
First of all, your ID cannot appear on one page twice. Remove it from your <li> tags. Secondly, for some reason jsfiddle isnt pulling the relative css data. I cut and pasted mine into there and it works now.
http://jsfiddle.net/Kxtvg/279/
I included some code in the head section.Here it is.
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>
</head>
Reference:
http://jqueryui.com/tabs/#vertical
Working Model:
http://jsfiddle.net/abhijalgaonkar/qTXnN/
Try not to modify the css in the source css file.Over riding the css would be a better option.
Let me know if it helps....
Related
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
I want to add onepagescroll on my website, I find it difficult to solve this problem, maybe because I am still learning stage.
You have to structure your page like so:
<body>
<div class="main">
<section>...</section>
<section>...</section>
</div>
</body>
Each of those section tags represent a "page", so when you scroll it just scrolls to the next section.
You also have to add jquery, the onepagescroll plugin and a script that calls the plugin on your main element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> //embed jquery
<script src="path/to/the/plugin/file.js"></script> //embed plugin
<script>
$( document ).ready(function() { //wait for jquery
$('#main').onepage_scroll(); //start the plugin
});
</script>
You may also check the plugins documentation, which was mentioned by Barmar or follow a tutorial to create a demo page.
I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:
http://jsfiddle.net/Lwdc4/
My JavaScript code is in an external file. This is what the file looks like:
$("#nav").addClass("js").before('<div id="menu">☰ </div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768){
$("#nav").removeAttr("style");
}
});
And my import to HTML:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="nav-menu.css"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nav-menu.js"></script>
</head>
What is wrong with my code? Any help is appreciated. Thanks in advance.
You need to add the jquery library to use the $ object
Add this line in your HTML to use it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Or choose your version directly on the jQuery website http://jquery.com/download/
Updated fiddle :
http://jsfiddle.net/Lwdc4/1/
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>
I recently came across fancy box located here, I've followed every step in the instructions perfectly, but it doesn't work, anyone know what might be the problem?
Here is a sample of my page source:
Included the links to scripts as required, and CSS:
<script src="jquery.fancybox-1.2.1/jquery.fancybox/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox-1.2.1.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox.css" rel="stylesheet"
type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
Then this should simply work:
<a id="single_image" href="images/279641.jpg"><img src="images/279641.jpg" /></a>
But it doesn't seem to do anything except open the image in a new window.
Any suggestions, and thanks in advance.
You forgot to implement step 4 (now step 5) from the manual, "Fire plugin using jQuery selector"
Try to include this one:
$(document).ready(function() {
$("a#single_image").fancybox({
'titleShow' : false
});
});
try to look at another javascript/jquery plugin you've implemented in your html page. cause some jquery plugin has a conflict with fancybox. it works for me.