This is quite odd, and I can't get it to stop happening.
Here's the relevant code. I'm using a Google CDN host for the UI-lightness theme.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
That's the only relevant HTML. Here's jQuery/JavaScript
$(document).ready(function() {
$('#prof_div').tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
And it's displaying like this:
TAB 1
TAB 2
TAB 3
Instead of like this:
TAB 1 - TAB 2 - TAB 3
I have no custom CSS acting on them at all (I even blanked my stylesheets to check).
Any idea why this is happening? I'll post a screenshot if necessary.
Thanks! :)
EDIT
Here's my CDN requests
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script>
<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
....
</script>
Remove those ending <br/>s from your <li>s. They shouldn't be there.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
Here's a fiddle.
Related
When you are leaving the parent item of a submenu in jquery menu,there is a slight delay closing the submenu.
any way to disable this and make it close instantly ?
*iknow its a EOL dead library but i'm asking just in case any of you guys remember something !
$(function() {
$("#menu").menu();
});
#menu{
width:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
</head>
<body>
<ul id="menu">
<li>
<div>W/O submenu</div>
</li>
<li>
<div>With submenu</div>
<ul><li><div>Submenu</div></li></ul>
</li>
</ul>
</body>
</html>
The menu widget does have a 300 millisecond delay.
So, if you download the non-minified version of the js file, from here:
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js (based on the OP's URL)
Then use that file locally. Then, in the file, change the delay at line 4946 (in the menu widget, noted on line 4943):
4943 var widgetsMenu = $.widget( "ui.menu", {
4944 version: "1.12.1",
4945 defaultElement: "<ul>",
4946 delay: 300, // THIS delay
4947 options: {
...to a lower value, say 100 (or lower), and then save, reload the page, and check the behavior.
Note that I would not remove the delay entirely, as there are references to that attribute/property, but set it to a lower value as to be virtually unnoticeable.
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working
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'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
So excuse me for being really new to this....but I shall try my best to detail the prob.
I have a script running on page for fancybox which is this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>
<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.4"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.4"></script
ul class="list">
<li>
<a class="various fancybox.iframe" href="http://www.topholidayrecipes.com">Iframe</a>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
NOW PROB IS THIS SCRIPT -->
* This script causes my drop down menu (that uses cufon replace function) to be static. And I need this script for the fancy box, but adding this disables the animation affect of the drop down.
The buttons located at the top right of the page works originally at: www.topholidayrecipes.com
And here is a page that uses the fancy box (link located in the recipes box named "iframe") but here the menu is static: http://topholidayrecipes.com/artichokes-recipes.html
Please help me with this.....I will be very grateful : )
You have a little bug in your js code:
._shadowBox()
that is creating this error:
Error:
shadowBox is not a function
Source File: http://topholidayrecipes.com/artichokes-recipes.html
Line: 717
and that breaks the rest of your js code (the animation affect of the drop down included).
Maybe you forgot to delete that line after unloading shadowbox and moving to fancybox
yes i tried by removing those lines of codes, but i discovered i dont need those codes anyways. what i discovered is this line of code in particular that seems to cause problems directly with the drop down:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
i have even downloaded the javascript from google directly and called it in my page another way using:
<script type="text/javascript" src="js/jquery.google.js"></script>
they both run the same thing and the fancy box works as it should. but i noticed that it is this particular line used for the fancybox that's causing problem with my dropdown menu. as soon as i remove this line of code the drop down works!