I created a wordpress theme, that is using javascript .innerHTML to insert content into certain divs. It is inserting text fine, but is not inserting images.
document.getElementById("title").innerHTML='<img src="images/header.gif"/>'
My knowledge on php is terrible but I also tried this
document.getElementById("title").innerHTML='<img src="<?php bloginfo('template_directory'); ?>/images/mainimage.jpg" title="" alt="" />';
here is index.php
<!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 profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script>
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body onload="formatPage();">
<div id="container">
<div id="logo"></div>
<div id="title"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
</body>
</html>
Here is javascript.js
function formatPage(){
document.getElementById("title").innerHTML='<img src="<?php bloginfo('template_directory'); ?>/images/header.gif" title="" alt="" />';
}
I understand my doctype is outdated and there may be some unneeded php in the header.
Confirm that the image path is correct. You must include that js file is in head section. That's why the pic is not getting loaded.And also move the head portion to header.php if its now in index.php.
Related
My code for jQuery datepicker works fine. But when I include a jQuery slider/banner on same page, the datepicker doesn't work. I think the script tags may conflict with other.
Scripts under head tag:
//for datepicker
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
//for slider/banner
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
html:
Search By Date <input type="text" id="datepicker" name="date">
<input type="submit" name="searchbydate" value="Search">
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
</script>
script.js file
$(document).ready(function(){
$("#datepicker").datepicker({dateFormat: 'dd/mm/yy'});
});
PHP code for slider
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
include("dbConnect.php");
$query="select * from event_table where enable_disable='Enable'";
$result=mysqli_query($conn,$query);
if(mysqli_num_rows($result)>0)
{
while($row=mysqli_fetch_array($result))
{
//echo "<img src='images/".$row['image']."' title='".$row['description']."' height='400'>";
?>
<img src="images/<?php echo $row['image'] ?>" title="<?php echo $row['event_name'] ?>" height="450">
<?php
}
}
else
{
echo "No Events";
}
mysqli_close($conn);
?>
</div>
</div>
My slider shows 2 extra empty slides at the start and after second slide,it works fine. How to remove extra empty slides?
html code for id="slider"
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connection</title>
</head>
<body>
</body>
</html> <img src="images/foot.jpg" title="Indian Super League 4" height="450">
<img src="images/volleyball.jpg" title="Pro Volleyball League" height="450">
<img src="images/nemo.jpg" title="Nemo Play" height="450">
<img src="images/walle.jpg" title="Robot Fight" height="450">
<img src="images/badminton.jpg" title="Premier Badminton League" height="450">
<img src="images/foot2.jpg" title="English Premier League" height="450">
</div>
</div>
Remove one of the jQuerys - for example <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
I also needed to fix the zindex of the picker Jquery date picker z-index issue
and use the CDN for all:
$(window).on('load', function() {
$('#slider').nivoSlider();
});
$(document).ready(function() {
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>
Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div id="slider" class="nivoSlider"> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" />
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" /> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg"
data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption"
/> </div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with a link. </div>
Using your html for the slider
$(window).on('load', function() {
$('#slider').nivoSlider();
});
$(document).ready(function() {
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>
Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/11/26/Pictures/hero-isl-m9-atk-v-pune_cb4d0a0a-d2a8-11e7-a40e-766ee48c25bf.jpg" title="Indian Super League 4" height="450">
<img src="http://images.all-free-download.com/images/graphiclarge/arrest_volleyball_picture_168170.jpg" title="Pro Volleyball League" height="450">
<img src="https://static1.squarespace.com/static/51cdafc4e4b09eb676a64e68/57aa036e20099eb9c945bcae/57aa03705016e1b85aa5821b/1470759793960/nemo11.jpg" title="Nemo Play" height="450">
<img src="https://vignette.wikia.nocookie.net/disney/images/2/2b/Wall-E.png/revision/latest?cb=20151002192237" title="Robot Fight" height="450">
<img src="https://cdn.pixabay.com/photo/2016/05/31/23/21/badminton-1428047_960_720.jpg" title="Premier Badminton League" height="450">
<img src="http://www.cyprusupdates.com/wp-content/uploads/2014/05/FreeGreatPicture.com-19724-football.jpg" title="English Premier League" height="450">
</div>
</div>
I think its because you are using two jquery libraries and they may have conflicts try removing one of them
I think you should remove :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
I used to have an hyperlink that is anchored to an image.
But I now when I click the image it needs to zoom in first so I used Fancy box, then the zoom in image must have the link.
Is it possible? Here is my code below
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</a>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
For future reference, it is possible but you need to create a form for your fancy box and not a direct image.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<img class="fancybox" src="thumbnail.jpg" alt="" />
<div id="divForm" style="display:none">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</div>
<script type="text/javascript">
$("#btnForm").fancybox();
</script>
</body>
</html>
I'm beginner for PHP. Why I cannot link to the CSS file with these codes? What's wrong with my code? Could someone help me?
header.php
<html lang="en">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="description" content="Bootstrap 3 responsive centered columns">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Codrops" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.slidertron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/modernizr.custom.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/foundation.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/foundation.min.js" type="text/javascript"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<noscript>
<p><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/skel.css" /></p>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/fakeLoader.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/gravity-forms-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/default.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/component.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation-flex.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation.min.css" />
</noscript>
</head>
Supposed to localhost/wordpress/wp-content/themes/Beyond/css/style.css(correct URL) but now it links to localhost/wordpress/sample-page/css/style.css(wrong URL). How to change the link to correct URL? Wordpress can load my Javascript but it cannot load my CSS file.
URL for linking CSS file
File Directory
Get the value of your template directory uri in a variable then use it in the program.if it is not coming just echo the value of $template_dir and post it here
<?php
$template_dir = get_template_directory_uri();
?>
<link rel="stylesheet" type="text/css" href="<?php echo $template_dir;?>/css/style.css" />
You are missing the echo statement. Try changing this:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
to this
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory');?>/css/style.css" />
Does this help?
I have installed last woocommerce plugin on my child theme.
When i change "Sort By" items on dropdown on shop page, nothing happend.
In Console view there is no any event.
JQuery works i check now,
jquery is loaded manually from footer.php like this:
<script type="text/javascript" src="/assets/plugins/jquery/jquery.min.js"></script>
and also i add this in functions.php:
function my_js() {
wp_enqueue_script( 'jquery' );
}
add_action('init', 'my_js');
Is there maybe sort with button and classic refresh?
EDIT:
this is footer.php where are scripts included:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="/assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="/assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="/assets/plugins/smoothScroll.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="/assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="/assets/js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
<!--[if lt IE 9]>
<script src="/assets/plugins/respond.js"></script>
<script src="/assets/plugins/html5shiv.js"></script>
<script src="/assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
header.php
<?php
global $current_user;
get_currentuserinfo();
$BASE = $_SERVER["DOCUMENT_ROOT"];
?>
<?php $base = 'https://www.example.co'; ?>
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package parallax-one
*/
?><!DOCTYPE html>
<?php parallax_hook_html_before(); ?>
<html <?php language_attributes(); ?> class="no-js">
<head>
<!--<title>Example.co - Betting system builder</title>-->
<?php parallax_hook_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php parallax_hook_head_bottom(); ?>
<?php wp_head(); ?>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/style.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/theme-colors/blue.css"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/headers/header-default.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/footers/footer-v1.css">
<script src="<?php echo $base ?>/assets/plugins/jquery/jquery.min.js"></script>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/animate.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/parallax-slider/css/parallax-slider.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v6.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v7.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v8.css">
<!-- CSS Customization -->
<!-- CSS Customization -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/custom.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/page_invoice.css">
</head>
<body itemscope itemtype="http://schema.org/WebPage" <?php body_class(); ?>
dir="<?php if (is_rtl()) echo "rtl"; else echo "ltr"; ?>">
<div class="header">
<div class="container">
<!-- Logo -->
<a class="logo" href="https://www.predictology.co">
<img src="<?php $BASE ?>/assets/img/logo1-default.png" alt="Logo">
</a>
<!-- End Logo -->
<!-- Topbar -->
<div class="topbar">
<ul class="loginbar pull-right">
<li>Join Now</li>
<li class="topbar-devider"></li>
<li>Why Predictology?</li>
<li class="topbar-devider"></li>
<li>Features</li>
<li class="topbar-devider"></li>
<li>Videos</li>
<li class="topbar-devider"></li>
<li>User Guide</li>
<li class="topbar-devider"></li>
<li>Support</li>
<li class="topbar-devider"></li>
<?php if($current_user->ID) { ?>
<li><?php echo $current_user->user_nicename; ?></li>
<li class="topbar-devider"></li>
<li>Logout</li>
<?php } else {?>
<li>Login</li>
<?php } ?>
</ul>
</div>
<!-- End Topbar -->
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
</div><!--/end container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li>
<a href="/predictions">
Predictions
</a>
</li>
<!-- End Shortcodes -->
<!-- Misc Pages -->
<li>
<a href="/eloratings">
Elo Ratings
</a>
</li>
<li>
<a href="/streaks">
Streaks
</a>
</li>
<!-- Pages -->
<li>
<a href="/stats">
Statististics
</a>
</li>
<!-- End Pages -->
<!-- Pages -->
<li>
<a href="/bettrack">
Bet Tracker
</a>
</li>
<!-- End Pages -->
<li>
<i class="fa fa-unlock"></i> Join Now
</li>
<!-- End Misc Pages -->
<?php //wp_nav_menu( array( 'theme_location' => 'predictology-menu' ) ); ?>
</ul>
</div><!--/end container-->
</div><!--/navbar-collapse-->
I have a control-group with a button group as checkboxes like this :
<div class="control-group" id="cyb3r" >
<label class="control-label" for="c">C</label>
<div class="btn-group navs controls" data-toggle="buttons-checkbox">
<button class="btn" type="button">1</button>
<button class="btn" type="button">2</button>
<button class="btn" type="button">3</button>
</div>
</div>
and I include these :
<link rel="stylesheet"
href="<?php echo base_url('assets/style/style.css');?>">
<link rel="stylesheet"
href="<?php echo base_url('assets/style/bootstrap.min.css');?>">
<script
type="text/javascript"
src="<?php echo base_url('assets/script/jquery.js')?>"></script>
<script
type="text/javascript"
src="<?php echo base_url('assets/script/bootstrap.min.js')?>"></script>
<script
type="text/javascript"
src="<?php echo base_url('assets/script/bootstrap-button.js')?>">
</script>
<script
type="text/javascript"
src="<?php echo base_url('assets/script/js.js')?>"></script>
and js.js :
$(function(){
$('#cyb3r').button();
});
I tried these also :
$(function(){
$('.navs').button();
});
$(function(){
$('.control-group').button();
});
but none of them work for that checkbox group.
but why?
bootstrap.min.js already includes bootstrap-button.js
you can remove
<script
type="text/javascript"
src="<?php echo base_url('assets/script/bootstrap-button.js')?>">
</script>
Are you sure that all libraries are included correctly?
Because for me it works fine: http://jsfiddle.net/QchpT/