I am trying to get the following behaviour on some font-awesome icons that are being used within a table.
When hover over the icon, shows a popover with more information for the user.
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/search.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/box.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
I thought I'd loaded the script correctly, but there is not the expected response when the file is put live onto the server (I checked bootstrap.js, it does include popover.js and tooltip.js inside of it as code sections.)
in the pastebin below is a version of the table where I have removed the majority of the rows whilst still keeping it visible what my intention is: http://pastebin.com/hYUBA711
(didn't want to paste it straight in cause tables always take up a lot of space, even this small 4 rows tall one, the real table is 16 rows)
Edit: oddly enough, when I try it on jsfiddle it does seem to work as I intend, but the live site doesn't... must be a different issue? The JSFiddle http://jsfiddle.net/zmug2y2q
Place your jquery code under jquery.js and bootstrap.js:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
});
</script>
Add a ; at the end of your jquery code: https://learn.jquery.com/using-jquery-core/document-ready/
Related
I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});
I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.
This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.
I've followed the steps given at http://fancyapps.com/fancybox/.
This is the code I have in my head.php file:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
This is copied from the given website.
I'm using the exact samen folder-name "fancybox", so I think that can't be the problem.
In my code where I want to load an image, this is what I have:
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
After loading this page, I have this code (also copied from the given website):
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.
Thanks for your help in advance!
This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this.
Here is a test page using your code with the urls modified to match the folder layout shown in the image below. As you can see it does work. Therefore, your issue must be due to your urls being incorrect or the files themselves being missing.
This is the code from the test page:
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<?php
$row['bestandsnaam'] = 'images.jpg';
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
?>
</body>
</html>
Folder layout:
I'm curious problem linking my js files in my php webpage. First at all, I put it at the end of the file (just before closing body tag) and in local mode everything works ok. But when I upload my web to my server js files seems not linking, I have to put it in header to work it.
So that way could be important to say all my functions are in a separated file called "scripts".
It's not important trouble, but I'm concerned. Anybody could explain me?
Thanks in advance
Edited
Thank you #Pointy and #Jochen for your quickly answer. I tried using chrome inspector. No errors show, only not load files. This is my web structure (I don't copy complete code cause would be so extense)
<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--CSS starter-->
<link href="" rel="stylesheet" media="screen">
<!--CSS font-awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link href="font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- javascript (here links working) -->
</head>
<body>
<!--sections-->
<!--/sections-->
<!-- javascript (here not working) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/messages_es.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I guess this path is wrong, try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I have WHMCS script but my main problem is Java script not working, I have tried many solutions but no luck. I'm sure about files path and their work I have tested it in another script, but no luck.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} -
{$kbarticle.title}{/if}</title>
<link rel="stylesheet" type="text/css" href="templates/{$template}/kk.css" media="screen" />
<!-- slider0000000000 -->
<!-- Le styles -->
<link href="templates/{$template}/1st/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.animations.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.min.css" rel="stylesheet" />
<link href="templates/{$template}/1st/flexslider/flexslider.css" rel="stylesheet" />
<link href="templates/{$template}/1st/assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- //slider00000000 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.lush.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script>
<!-- popup -->
<!-- /popup -->
<!-- slideshow -->
<script language="JavaScript" type="text/javascript"
src="templates/{$template}/scripts/jquery.cycle.all.2.74.js"></script>
<!-- slideshow/// -->
<!-- fade -->
<script type="text/javascript" src="templates/{$template}/scripts/55.js"></script>
<script type="text/javascript" src="templates/{$template}/scripts/66.js"></script>
<!-- /fade -->
</head>
<body>
Add {literal} before start of your js and {/literal} after js finish.
ex:
{literal}
$(document).ready(function(){
alert("here");
});
{/literal}
WHMCS use smarty templates you'll need to add {literal} before start of javascript and {/literal} at the end of javascript.
Which version are you using? based on the date of the submission I will say the latest or close to it, but I would have added to much code to the javascript link, I currently have mine setup as under the example as - <script src="templates/{$template}/js/jquery.easing.1.3.js"></script> which then registers and pulls the right location, so if your link is <script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script> and the 1st is the name of the template then WHMCS you need to remove that and test it again, you don't need the folder name after linking to it as it register the folder name and will display it properly. Hopefully this helps a little bit better for you.
Refer to WHMCS documentation on bracelet
Everything within the {literal} {/literal} tags will not be parsed (such as the template variables). However, you would be able to accomplish adding the template variables by using multiple literal statements.
I'm getting the following error message in Chrome and firefox while trying to implement gorbachev's syntax highlighter.
The page at local host says:
SyntaxHighlighter
Can"t find brush for: php
It's all the more frustrating because i just got it working on a test page in the same folder, it still works. There is very little different between the two pages. Here's my code:
<??>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--JQUERY SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<!--PROCESSING SCRIPTS
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
-->
<!--syntax highlighter-->
<script type="text/javascript" src="shBrushPhp.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
SyntaxHighlighter.all();
});
</script>
</head>
<title>code</title>
<body>
<div id="content">
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<!--<script type="application/processing">
</script>
<canvas data-processing-sources="processing/lines.pde">
</canvas> -->
</div>
</body>
</html>
<??>
For me, the solution was making the brush style non-capital. So for me, I was adding a new brush to syntaxhighlighter (haskell), and I changed the markup:
<pre class="brush:Haskell">...</pre>
To
<pre class="brush:haskell">...</pre>
Alternatively, you could change the brush identifier:
Brush.aliases = ['Haskell'];
Hope this helps!
It cant find the js file for the php highlighter. Make sure you uploaded the right brush and have the correct path for the brush. I had a lot of trouble getting it work in an MVC 3 application. I ended up using the S3 hosted files that Alex has.
Trying calling the remoted files and see if it works. Also take the call SyntaxHighlighter.all() out of your jquery call. Mine is in its own set of script tags. See if that works.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
i just moved all the content from the page into the test page, renamed it and it works fine now. just one of those things i guess.