ok Here is my issue: I am using Joomla 1.6,
I have a Ajax JS to display the slide how on my site located: www.dhwnj.com The Jquery script i am using when enabled stops my slide show from working so I tried using the No conflict script but I do not know if I am using it correctly :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template?>/js/fancybox/jquery.fancybox.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("jquery.maphilight.js").hide();
});
// Use Prototype with $(...), etc.
$('_class.noobSlide.packed.js').hide();
</script>
<script type="text/javascript" src="<?php echo this->baseurl; ?>/templates/
<?php echo $this->template ?>/js/_class.noobSlide.packed.js" >
</script>
Any Ideas?
Prototype can't work together with Mootools and Mootools is loaded on your page (probably directly by Joomla)
Maybe here's the reason behind your problem...
You should use jQuery after mootools. You can ensure mootools is looaded first by this code (use it in the module or in the view of a component)
JHTML::_('behavior.mootools');
$doc = &JFactory::getDocument();
....
$doc->addScript( "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" );
$doc->addScriptDeclaration('jQuery.noConflict();');
$doc->addScriptDeclaration("
jQuery(document).ready(function(){
alert('jo');
});"
);
This is code for joomla 1.5, don't know if the functions are the same in 1.6.
Related
I am trying to load scripts in Wordpress functions.php and they are not loading.
functions.php
<!--====== Jquery js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/vendor/jquery-1.12.4.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/popper.min.js"></script>
<!--====== Slick js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Isotope js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/isotope.pkgd.min.js"></script>
<!--====== Imagesloaded js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== nice-select js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.nice-select.min.js"></script>
<!--====== select number ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.nice-number.min.js"></script>
<!--====== jquery-ui js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery-ui.min.js"></script>
<!--====== Syotimer js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.syotimer.min.js"></script>
<!--====== Main js ======-->
<script src="<?php bloginfo('template_directory');?>/assets/js/main.js"></script>
add_action('wp_enqueue_scripts', 'add_scripts');
They aren't loading and I need to get this working.
Thanks in advance!
The code you wrote will not work, you should use the wp_enqueue_script function for this.
and instead of using bloginfo('template_directory') use get_stylesheet_directory_uri() as mentioned here
you can use the below example to load the scripts in your website.
function load_my_script_files(){
wp_enqueue_script('modrenizer', get_stylesheet_directory_uri() . "/assets/js/vendor/modernizr-3.6.0.min.js", array(), "3.6.0");
// Add lines like the one above to add other scripts, if one script is dependent on the other put its name inside the array()
}
add_action( 'wp_enqueue_scripts', 'load_my_script_files' );
If you want to know more about how this works I reccomend reading the developer documentation here
I tried to add JQuery Chosen plugin to my website, but i can't make it work on a <select> , there are 2 classes in it that are from bootstrap, i tried to chosen-select on it, didn't work.
Heres the code, also, this page is being built in PHP.
PHP-Dropbox
<select class="form-control bfh-countries chosen-select" data-country="PT">
<option value="PT">Portugal</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">
(...)
and so on.
I added the plugin at the end of the file
Import JS libray and plugin
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
Why I can't load the plugin to the selector?
You are adding your site's url infront of the google api's url , which is wrong and the jquery is not working for you at all. What site_url or base_url from codeigniter (which is your framework) does is , generate an url which is specified inside config.php file. if you put a path of any file inside these functions , it will become sort of :
yoursite.com/your/another/path/file.js
Change your code from this :
<script src="<?php echo site_url('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');?>" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
<script type="text/javascript">
$(window).load(function(){
$(".chosen-select").chosen()
});
</script>
to this Updated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo site_url('recursos/chosen/chosen.jquery.js'); ?>" type="text/javascript" > </script>
<script type="text/javascript">
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
and add this line to your <head> tag not in footer :
<link rel="stylesheet" href="<?php echo base_url();?>recursos/chosen/chosen.css" />
By looking at the comment you have posted. Your path to the chosen plugin files are wrong. Please make sure you are targeting the right path.
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I am using code igniter, and I want to add a datetime picker using datetimepicker. The script can be found here
I have 2 sections on my webpage - the header and the content. On the controller, I load them both. Here is my javascript head
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
and here is my textbox code
<input id="tanggal" type="text" class="textbox" disabled="disabled"> <img src="<?php base_url(); ?>img/cal.gif">
when I refresh the page, I can hover the cal.gif, but when I click em, cal.gif is not responding. What went wrong in my code?
This is not the correct way of including javascript files:
<script href="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
It should be:
<script src="<?php echo base_url(); ?>js/datetimepicker.js" type="text/javascript"></script>
Just to keep in mind, base_url allows to do this:
<script src="<?php echo base_url('js/datetimepicker.js')?>" type="text/javascript"></script>
I've a problem about jqmodal. That pop up can not appear. My scenario is any data in variable warning, pop up will appear and will appear the all warning data.
This the code. Please help me. Thanks
<link type="text/css" rel="stylesheet" href="<? echo base_url().'css/jqmodal/css/prettify.css'; ?>" />
<script type="text/javascript" language="JavaScript" src="<? echo base_url().'css/jqmodal/';?>js/prettify.js"> </script>
<link type="text/css" rel="stylesheet" href="<? echo base_url().'css/jqmodal/';?>css/jquery.modaldialog.css" />
<script type="text/javascript" language="JavaScript" src="<? echo base_url().'css/jqmodal/';?>js/jquery.js"> </script>
<script type="text/javascript" language="JavaScript" src="<? echo base_url().'css/jqmodal/';?>js/jquery.modaldialog.js"> </script>
<script type="text/javascript" language="JavaScript">
$().ready(function(){
prettyPrint();
});
</script>
if(#$warning != NULL)
{
?>
<div id="jqModal" class="jqmWindow" style="display: none;"></div>
<script type="text/javascript">
jQuery().ready(function($){
$('#jqModal').jqm({onShow:setText});
$('#jqModal').jqmShow();
function setText(){
$('#jqModal').text(<?php echo #$warning;?>);
}
});
</script>
<?php
Hey Ayu I built a small demo for you Demo http://jsfiddle.net/BG42j/
Now if you will click on the view... in above demo you will get the text I am setting in my setText function. Rest you can play around with the demo. And please don't forget to accept the answer if this helps. :) Your accept ration is very low :)
Helpful link: http://dev.iceburg.net/jquery/jqModal/
So I reckon issue was the way setText is declared is not correct /* callback executed when a trigger click. Show notice */ onShow (callback): Called when a dialog is to be shown. Be sure to show (set visible) the dialog.
Hope this helps and have a nice one! cheers
Jquery Code
$(document).ready(function() {
$('#dialog').jqm({onShow:setText});
// $('#dialog').jqm().jqmShow({overlay: 70});
});
var setText = function(h) {
/* callback executed when a trigger click. Show notice */
h.w.text('Warning! foooooo');
h.w.css('opacity',0.92).slideDown();
}