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/
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>
Im currently working on a project using codeigniter framework and bootstrap 3 sb admin 2 template, I have no experience about JQuery or Ajax before, now I want create an edit form to load and saving data in bootstrap modal just like this http://formvalidation.io/examples/loading-saving-data-modal/ but I keep getting this error on my console view_user:323 Uncaught ReferenceError: $ is not defined and the edit form didn't load at all. Here's and my code :
The CSS I include:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home">
<meta name="author" content="MGA">
<title>App | POS</title>
<!--Page Logo-->
<link rel="icon" type="images/ico" href="<?php echo base_url();?>/assets/images/logo.png">
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/mytheme.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>/assets/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url();?>/assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- DataTables CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
The Code Itself :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Daftar User</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#view">Lihat User</a></li>
<li><a data-toggle="pill" href="#add">Tambah Baru</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="view" class="tab-pane fade in active">
<div class="row">
<div class="col-lg-12">
<!-- /.panel-heading -->
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Jabatan</th>
<th>Status</th>
<th>Menu</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($session as $row1) {
if($row1->id == "ADMIN" && $row1->jabatan_id == 1){
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td >".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td>
<div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a> <a data-toggle='modal' data-id=".$row->id." class='edit btn btn-warning btn-circle'><i class='fa fa-pencil fa-fw'></i></a></div>
</td>
</tr>";
$no++;
}
}else{
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td>".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td><div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a></div>
</tr>";
$no++;
}
}
}
?>
</tbody>
</table>
<!-- /.table-responsive -->
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<div id="add" class="tab-pane fade">
<?php include 'addnew.php' ?>
</div>
<?php include 'formedit.php' ?>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
The formedit.php :
<script type="text/javascript">
$(document).on("click", ".open-edit", function () {
var userID = $(this).data('id');
$(".modal-body #userID").val( userID );
});
</script>
<div class="modal hide" id="edit_user">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="userID" id="userID" value=""/>
</div>
The Javascripts And JQueries :
<!-- jQuery -->
<script src="<?php echo base_url();?>/assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url();?>/assets/dist/js/sb-admin-2.js"></script>
<!-- DataTables JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/datatables/media/js/jquery.dataTables.min.js">
</script>
<script src="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script type="text/javascript">
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
Sorry for my bad english btw :)
IDs should be unique to the page, so it would probably be cleaner to do $(#userID).val(userID). But that aside...
In terms of error view_user:323 Uncaught ReferenceError: $ is not defined likely your jQuery is not defined. Ensure that your page is loading the jQuery properly (that the file is both there, and has the code in it).
Chrome: Right click -> Inspect -> Sources
Firefox: Right Click -> Inspect Element -> Debugger -> Sources
Internet Explorer: Click -> Inspect Element -> Debugger
I'm using bootstrap and joomla 3 to build a template (http://lucapadovani.com/tese-beta/) and having some issues with 2 responsive navbars: when I click on the toggle buttons the menus simply do not open. I guess there might be some kind of conflict between joomla "bootstrap.framework" and other js related stuff, but all of this is quite new for me, so I'm not sure how to solve the problem. Any help? Thx.
Index.php
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
// Check homepage
$defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
$currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;
if($defaultMenu == $currentMenu){
$bodyId = 'id="home"';
$homePage = true;
}else{
$bodyId = '';
$homePage = false;
}
// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt=" Tese" />';
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include optional regions in the template -->
<?php
$this->_scripts = array();
?>
<jdoc:include type="head" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<!-- Stylesheets listed below
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />-->
<!-- Bootstrap styling -->
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet" media="screen">
<?php
// Header color
if ($this->params->get('headerColor'))
{
?>
<style type="text/css">
header{
background:<?php echo $this->params->get('headerColor');?>;
}
</style>
<?php
}
?>
<?php
// Top menu (active-item) color
if ($this->params->get('topColor'))
{
?>
<style type="text/css">
.topheader .navbar-inverse .nav .active>a,
.topheader .navbar-inverse .nav .active>a:hover,
.topheader .navbar-inverse .nav .active>a:focus {
background-color:<?php echo $this->params->get('topColor');?>;
}
</style>
<?php
}
?>
<?php
// Menu color
if ($this->params->get('menuColor'))
{
?>
<style type="text/css">
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a {
background-color:<?php echo $this->params->get('menuColor');?>;
}
</style>
<?php
}
?>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/respond.min.js"></script>
</head>
<body>
<div class="container all"><!--Page container-->
<!--===Top===-->
<div class="row topheader">
<div class="col-sm-12">
<nav class="navbar navbar-inverse" role="navigation" id="topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Tese</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<jdoc:include type="modules" name="topmenu" style="html5" />
<ul class="nav navbar-nav navbar-right">
<li><jdoc:include type="modules" name="socialnetworks" style="html5" /></li>
<li><jdoc:include type="modules" name="search" style="html5" /></li>
</ul>
</div>
</nav>
</div>
</div>
<!--===/top===-->
<!--===Header===-->
<header class="row">
<div class="col-sm-3 logo"><?php echo $logo;?></div>
<div class="col-sm-7">
<nav class="navbar navbar-inverse" role="navigation" id="mainnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex2-collapse">
<jdoc:include type="modules" name="menu" style="html5" />
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-sm-2">
<jdoc:include type="modules" name="join" style="html5" />
</div>
</header>
<!--===/header===-->
<!--===Home-only layout===-->
<?php if($homePage == true): ?>
<div class="row">
<div class="col-sm-12"><jdoc:include type="modules" name="banner" style="html5" /></div>
</div>
<div class="row" id="areas">
<div class="col-sm-12"><jdoc:include type="modules" name="buttons" style="html5" /></div>
</div>
<div class="row" id="intro">
<div class="col-sm-12"><jdoc:include type="modules" name="about" style="html5" /></div>
</div>
<div class="row" id="news">
<div class="col-sm-12"><jdoc:include type="modules" name="content1" style="html5" /></div>
<div class="col-sm-12"><jdoc:include type="component" /></div>
</div>
<div class="row" id="partners">
<div class="col-sm-12"><jdoc:include type="modules" name="partners" style="html5" /></div>
</div>
<? endif; ?>
<!--===/home-only layout===-->
<!--===Page layout===-->
<?php if($homePage == false): ?>
<div class="col-sm-3 pull-right">
<jdoc:include type="modules" name="breadcrumb" style="html5" />
</div>
<!-- W/ module right: 2 columns layout -->
<?php if ($this->countModules('right')): ?>
<div class="row">
<div class="col-sm-9" id="main">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<div class="col-sm-3" id="sidebar">
<jdoc:include type="modules" name="right" style="html5" />
</div>
</div>
<!-- Else: 1 column layout -->
<?php else : ?>
<div class="col-sm-9">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<? endif; ?>
<? endif; ?>
<!--===/page layout===-->
<!--===Footer===-->
<footer class="row">
<div class="col-sm-9"><jdoc:include type="modules" name="footer1" style="html5" /></div>
<div class="col-sm-3"><jdoc:include type="modules" name="footer2" style="html5" /></div>
</footer>
<!--===/footer===-->
</div><!--/page container-->
<!--<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script>-->
</body>
</html>
I went through the link provided by you.
There are couple of Javascript errors. That you have needed to fix.
JS Error: window.addEvent - addEvent method is undefined. Here, window.addEvent is mootool Javascript library method. I checked it, in your page, I couldn't able to find the reference of mootool library.
JS Error - autocompleter.js - "Uncaught ReferenceError: Class is not defined". This should be resolved after you will add mootools JS link.
You could find that in "media\system\js\mootools-core.js".
As, working with Jquery and mootools requires jquery-noconflict.js. You also need to take care of "jquery-noconflict.js", which you could find it in "media\jui\js\jquery-noconflict.js".
So, make sure to remove the Javascript errors to make your functionality.
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.
New to JQuery and web dev in general.
I have been trying to get the confirm override simplemodal demo to work, so that it pops up with on alert on initial load of my site.
The below is the standard sample, but I have included the $(document).ready() function to try and fire the modal dialog on startup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').modal();
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
However, this does not fire, and from what my limited experience with Firebug, I cannot see any errors so must be my code logic that is the issue?
It works for me in JSFiddle. What about using .dialog method of jquery UI library:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#confirm-dialog').dialog({modal: true});
});
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='confirm-dialog'>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
</body>
</html>
You can download jquery.ui file from here