Can someone help me figure out why the ajax content is not loaded in the following
http://jsfiddle.net/nmsZX/
<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>
<div id="casetabs">
<ul>
<li>
Tab A
</li>
<li>
Tab B
</li>
</ul>
</div>
Adding below piece of code in you code works
<script type="text/javascript">
$(function() {
$('#casetabs').tabs({remote: true});
});
</script>
Related
I'm new to creating websites, and am unsure as to why I can't get jquery/javascript to work. I'm trying to make a page which has dynamic tabs, copied from http://www.jankoatwarpspeed.com/dynamic-tabs-using-jquery-why-and-how-to-create-it/. My current file is as follows,
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul></div><div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
For some reason, I cannot see "ready!" in the browser console. I have checked a couple other pages and I feel I am missing something basic, but being so new to this I can't see it. Thanks in advance for your help.
You need to use tow javascript tags one for to load the jQuery and an other one for your code.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
Perhaps with your structure. Try this:
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
And your script code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
Get rid of div and modify ul like this if you want to work it properly ;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
Modify your script like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
it could be done without jquery. all you have to do is define parent container of image and list set some css.
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>
So here we are: http://greeceinsiders.com/VLASIOS/offcanvas/studio.html
I followed the instructions for having the orbit slider in a page but this one doesnt seem to be working. I read from other users that they experience similar problems. Can anyone help?
<ul data-orbit class="orbit-slides-container">
<li data-orbit-slide="1">
<img src="images/studio/1.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="2">
<img src="images/studio/2.jpg" />
<div class="orbit-caption">...</div>
</li>
<li data-orbit-slide="3">
<img src="images/studio/3.jpg" />
<div class="orbit-caption">...</div>
</li>
</ul>
and at the end of the closing body tag I include the javascripts:
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document.write('<script src=/javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<!-- Included JS Files -->
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/jquery.js"></script>
<script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="javascripts/foundation/jquery.placeholder.js"></script>
<script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="javascripts/foundation/jquery.offcanvas.js"></script>
<script src="javascripts/foundation/app.js"></script>
<script>
$(document).foundation();
</script>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
You don't have Zepto uploaded to your server or it's in the wrong file location. You're getting the following NOT FOUND error: http://greeceinsiders.com/javascripts/vendor/zepto.js
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.