I'm having trouble with loading the JQuery for Fancybox. I really have no idea what is going wrong.
<!-- FAVICON + CSS -->
<link href="<?php echo base_url() . APPPATH; ?>images/ftimagesoriginal/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url() . APPPATH; ?>styles/layout.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() . APPPATH; ?>styles/menu.css"/>
<!-- JQUERY FANCYBOX + CSS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() . APPPATH; ?>fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() . APPPATH; ?>fancybox/jquery.fancybox.css?"/>
<!-- JQUERY MENU -->
<script type="text/javascript" src="<?php echo base_url() . APPPATH; ?>js/jquery.easing.1.3.js"></script>
The code above is in my MAIN_MASTER page, in my 'home.php' page I'm requesting the .fancybox function.
<script type="text/javascript">
JQuery(document).ready(function(){
$('.fancybox').fancybox();
});
The code below is an example of an image with Fancybox.
<li><a class="fancybox" href="<?php echo base_url() . APPPATH; ?>images/ftimagesoriginal/ft1.jpg"><img src="<?php echo base_url() . APPPATH; ?>images/ftimagesresized/ft1174.jpg" alt="test"/></a></li>
I really have no idea what is going on. I checked the order of loading the JQuery libs, I checked the console in Chrome and I'm getting the 'Uncaught referenceError: JQuery is not defined' error. All of my JQuery libs are loading so the browser finds them on my server.
Can anyone help me resolving my problem? I'm affraid it's just a very stupid mistake, but I can't seem to find it.
Thanks for your help.
Try this code.
$(document).ready(function(){ //JQuery is replaced by $
$('.fancybox').fancybox();
});
Related
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=300,height=300');
popupWin.document.open();
popupWin.document.write('<html><head><link href="<?php echo $temp_url;?>/css/bootstrap.min.css" rel="stylesheet" media="print"><link href="<?php echo $temp_url;?>/css/default.css" rel="stylesheet" media="print"><link href="<?php echo $temp_url;?>/js/item-slider/initcarousel-1.css" rel="stylesheet" media="print"><link href="<?php echo $temp_url;?>/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="print"><link href="<?php echo $temp_url;?>/js/select/fancySelect.css" rel="stylesheet" media="print"></head><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
I am printing a perticular div area in php . but when i print the div all css is working only background css is not working. i tried to solve it with inline css but it's also not working.
1.Image of nivo slider display in my template . But when I use it into codeIgniter then it can not display.
2.Others content of template shows but only image does not show .
3.With firebug I saw when nivoslider div act then it show image tag where visibility:hidden and background show url of image not found.
I am newbie . Please help me.
Master page :
This is code:
<title>This is Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<?php echo base_url();?>css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url();?>css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<!-- Amazing Mobile Menu CSS -->
<link href="<?php echo base_url();?>css/jquery.fs.naver.css" rel="stylesheet" type="text/css" />
<!-- News Tickr CSS -->
<link href="<?php echo base_url();?>css/ticker-style.css" rel="stylesheet" type="text/css" />
<!-- Bebas Webfont -->
<link href="<?php echo base_url();?>fonts/stylesheet.css" rel="stylesheet" media="screen">
<!-- Nivo Slider CSS -->
<link rel="stylesheet" href="<?php echo base_url();?>css/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url();?>css/nivo-slider.css" type="text/css" media="screen" />
<!-- Main CSS -->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" media="screen">
<!-- Responsive Framework -->
<link href="<?php echo base_url();?>css/responsive.css" rel="stylesheet" media="screen">
**html code for nivoslider:**
<div id="slider" class="nivoSlider">
<img src="<?php echo base_url();?>img/toystory.jpg" alt="" />
<img src="<?php echo base_url();?>img/up.jpg" alt="" />
<img src="<?php echo base_url();?>img/walle.jpg" alt="" />
<img src="<?php echo base_url();?>img/nemo.jpg" title="#htmlcaption" alt="" />
</div>
''''''''''''''''''''''''''''
''''''''''''''''''''''''''' **others code here**![enter image description here][1]
this code for script:
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
controlNav: false
});
});
</script>
<script src="<?php echo base_url();?>js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
<script src="<?php echo base_url();?>js/jquery.fs.naver.min.js"></script>
<script type="text/javascript">
$("nav").naver({
animated: true
});
</script>
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
[1]: http://i.stack.imgur.com/JsaIJ.png
Change
<?php echo base_url();?>img/toystory.jpg
into
<?php echo base_url();?>/img/toystory.jpg
(note the slash).
Or even better: remove all <?php echo base_url();?> and add in your head:
<base href="/" /> or <base href="<?php echo base_url();?>/" />
I'm new to code igniter and I wonder why my css doesn't work when I add slash ( / ) at the end of the url ..
Can someone help me why it doesn't work ? And help me make it work ?
Try this add code to your html head:
<link rel="stylesheet" href="<?php echo site_url('css/style.css');?>" type="text/css"/>
or
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css"/>
CodeIgniter has method: site_url() - which generates your home url with '/' (slash) at the end.
To access public assets of your application
use this:
<link type="text/css" rel="stylesheet" href="<?php echo site_url(); ?>public/css/smoothness/jquery-ui-1.10.2.custom.min.css">
<script type="text/javascript" src="<?php echo site_url(); ?>public/js/custom.modernizr.js"></script>
Note: href="<?php echo site_url(); ?>public/css/smoothness/jquery-ui-1.10.2.custom.min.css"
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6
I am getting an error ReferenceError: jQuery is not defined in jquery-ui-1.8.17. I tried to change code to jquery-ui-1.8.16 but that is also not working.
My template view is as follows:
<head>
<LINK REL="SHORTCUT ICON" HREF="<?php echo base_url('theme'); ?>/images/icon.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('theme/css');?>/style.css" />
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery.js"></script>
</head>
can any one help me ??
you need to include jQuery base library first, and then you can include custom.
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
May be this link http://forum.jquery.com/topic/and-jquery-not-defined-problems
can help you out. maintaining the order can resolve your problem.
Change the order of your include scripts:
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
include jQuery before adding jQuery-ui