how to dynamically (or not) move javascript to the footer - javascript

I have a wordpress site, and I need to move some javascript to the footer. I am using a theme (photocrati) that only uses the wp_enqueue_scripts tag a total of 4 times in the header.php file.
What I'm looking to do is find a way, hopefully dynamically, to move the javascript files to the footer. I realize this would be much easier using the $in_footer if they were properly referenced using the enqueue_scripts, but alas, that's not the case.
Being that this is a photography studio website, I need to do everything I can to reduce loading time. Now, obviously I'm not about to move CSS to the footer like google page speed recommends because I don't want my site being rendered unformatted when the visitor first views it.
After doing everything else I can (I obviously can't do anything about minimizing or setting leveraging browser caching on files not hosted with my site, ie the google analytics js file), the page speed insights recommends, "Remove render-blocking JavaScript and CSS in above-the-fold content" is all I have left. I am hoping once I move the js to the footer my page load time will be under 5 seconds considering it is now just under 6 and there are 19 script resources.
Hopefully someone can give me some guidance on being able to do this through some PHP code added to the functions.php file since I (for the most part) understand what's going on with PHP code when I am writing. But, I am having a hard time deciphering what is going on in the header file, and being able to find all 19 js files to delete them from the header file and enqueue them properly.
EDIT Here is the header.php file. I've noticed that some of the scripts are not even called here in any way because when I search the file for say "hoverintent.js" it's nowhere to be found, but if I search the source code after my page loads, sure enough it's in the header.
<?php
$preset = Photocrati_Style_Manager::get_active_preset();
extract($preset->to_array());
$rcp = $wpdb->get_results("SELECT fs_rightclick,lightbox_mode,lightbox_type FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($rcp as $rcp) {
$fs_rightclick = $rcp->fs_rightclick;
$lightbox_mode = $rcp->lightbox_mode;
$lightbox_type = $rcp->lightbox_type;
}
$music = $wpdb->get_results("SELECT music_blog,music_blog_auto,music_blog_file,music_blog_controls,music_cat,music_cat_auto,music_cat_file,music_cat_controls FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($music as $music) {
$music_blog = $music->music_blog;
$music_blog_auto = $music->music_blog_auto;
$music_blog_controls = $music->music_blog_controls;
$music_blog_file = $music->music_blog_file;
$music_cat = $music->music_cat;
$music_cat_auto = $music->music_cat_auto;
$music_cat_controls = $music->music_cat_controls;
$music_cat_file = $music->music_cat_file;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 9 ]> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> class='ie9'><!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">
<?php
Photocrati_Fonts::render_google_font_link(array(
array($font_style, $font_weight, $font_italic),
array($sidebar_font_style, $sidebar_font_weight, $sidebar_font_italic),
array($sidebar_title_style, $sidebar_title_weight, $sidebar_title_italic),
array($title_style, $title_font_weight, $title_italic),
array($h1_font_style, $h1_font_weight, $h1_font_italic),
array($h2_font_style, $h2_font_weight, $h2_font_italic),
array($h3_font_style, $h3_font_weight, $h3_font_italic),
array($h4_font_style, $h4_font_weight, $h4_font_italic),
array($h5_font_style, $h5_font_weight, $h5_font_italic),
array($description_style, $description_font_weight, $description_font_italic),
array($menu_font_style, $menu_font_weight, $menu_font_italic),
array($submenu_font_style, $submenu_font_weight, $submenu_font_italic),
array($footer_widget_style, $footer_widget_weight, $footer_widget_italic),
array($footer_font_style, $footer_font_weight, $footer_font_italic)
));
?>
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- IMPORTANT! Do not remove this code. This is used for enabling & disabling the dynamic styling -->
<?php if($dynamic_style) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/dynamic-style.php" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/style.css" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } ?>
<!-- End dynamic styling -->
<!--[if IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.lightbox-0.5.css" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php
if( !is_admin()){
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-effects-core');
if ($preset->custom_js) wp_enqueue_script('photocrati-custom-js', site_url('?photocrati-js'));
}
?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if($fs_rightclick == "ON") { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/clickprotect.js"></script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/jplayer.style.css" />
<?php if($lightbox_type == 'fancy'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<?php elseif($lightbox_type == 'light'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-light.css" type="text/css" />
<?php elseif($lightbox_type == 'thick'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-thick.css" type="text/css" />
<?php endif ?>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup.css" type="text/css" />
<?php endif ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/admin/js/jquery.fancybox-1.3.4.pack.js"></script>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup-v0.9.9.min.js"></script>
<?php endif ?>
<?php if($style_skin == 'modern' && is_front_page()): ?>
<?php
// when selecting multiple images as background then $home_bg_image is an array
if (!is_array($home_bg_image)) {
$home_bg_image = array($home_bg_image);
}
$home_bg_list = array();
foreach ($home_bg_image as $bg_image) {
if ($bg_image != null) {
$bg_img = Photocrati_Style_Manager::get_image_url($bg_image, true);
if ($bg_img != null) {
$home_bg_list[] = array(
'image' => $bg_img,
'thumb' => Photocrati_Style_Manager::get_image_url($bg_image, true, 'thumbnail'),
'title' => $bg_image,
);
}
}
}
// check that there are 1 or more images selected, otherwise fallback to default
if ($home_bg_list == null) {
$home_bg = 'default';
}
?>
<?php if($home_bg == 'slideshow'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? >/scripts/supersized/slideshow/css/supersized.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : <?php echo (floatval($home_bg_interval_speed) * 1000) ?>, // Length between transitions
transition : <?php echo ($home_bg_transition_effect) ?>, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : <?php echo (floatval($home_bg_transition_speed) * 1000) ?>, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : <?php echo json_encode($home_bg_list) ?>,
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
There's the part of the header.php file that contains the js file references. As I said before, not all of them are called through the header.php file.


Enqueue script has a fifth parameter, which is a boolean, false as default. If you set to true, your scripts will be in the footer. In case, your theme has the wp_footer() method in the footer.
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
An example:
<?php wp_enqueue_script( 'mysript', get_template_directory_uri() . '/js/myscript.js', array(), false, true ); ?>

Related

Owl Carousel with Magnific Popup - Popup not even displaying, not sure what I'm doing wrong

I'm using Magnific Popup for my Owl Carousel Slider. I just want the images to pop-up on screen. However, it doesn't seem to be working. The only thing it does it when I click the images, it opens up its src link. But I just want the Magnific Popup. Am I importing the files wrong? Am i formatting wrong? I've tried so much and can't seem to get the Magnific Popup to even display...
HTML/PHP
<div class="owl-carousel owl-theme details_banner">
#forelse($home_images as $image_model)
#php
$real_image = public_path('uploads/frontend/home/' . $image_model->name);
$image = asset('public/uploads/frontend/home/' . $image_model->name);
if (!file_exists($real_image)) {
$image=DEFAULT_IMG;
}
#endphp
<a class="popup1" href="<?php echo $image ?>"><img src="<?php echo $image ?>"/></a>
#empty
<a a class="popup1" href="<?php echo DEFAULT_IMG ?>"><img src="<?php echo DEFAULT_IMG ?>"/></a>
#endforelse
</div>
Javascript
<script type ="text/javascript">
$(document).ready(function() {
$('.popup1').magnificPopup({
type: 'image',
closeOnBgClick :true,
enableEscapeKey: true
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="vendor/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
I put this at the top of my file
<link rel="stylesheet" href="{{asset('public/frontend/css/owl.carousel.min.css')}}" />
<link href="{{asset('public/backend/css/jquery-confirm.min.css') }}" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="vendor/Magnific-Popup-master/dist/magnific-popup.css" media="screen"/>

Solved by putting these 2 lines above my Magnific Function
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

How to replace Twenty Seventeen Wordpress header with slider?

I would like my header to be replaced by my slider made with the Master Slider widget. I want the slider to be full size, just like the header image is right now.
This is the header code:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
The shortcode for my slider is:
[masterslider id="1"]
PHP function:
<?php masterslider(1); ?>
How can I insert this image slider to replace the header image on the front page only without affecting the rest of the page?
Thanks.

Gridstack Auto Resize When Fullscreen Browser

Hello i have a plugin gridstack, And already use this plugin
But i'm have a problem.
When i'm full screen mode browser my page show whitespace, but if not fullscreen mode this whitespace has gone
Fullscreen Mode
Not Fullscreen Mode
I'm confuse to fix this
this is my code
index.php
in pastebin Click Here
<?php include "element/connection.php"; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DMS | PJB UP. Muara Karang</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/square/blue.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/logo-pjb.png">
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js"></script>
<!-- Highchart -->
<script type="text/javascript" src="dist/js/highchart/highcharts.js"></script>
<script type="text/javascript" src="dist/js/highchart/highcharts-more.js"></script>
<script type="text/javascript" src="dist/js/highchart/exporting.js"></script>
<!-- GridStack -->
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack.css"/>
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack-extra.css"/>
<script src="dist/js/jquery-ui.js"></script>
<script src="dist/js/lodash.min.js"></script>
<script src="dist/js/gridstack/dist/gridstack.js"></script>
<script src="dist/js/gridstack/dist/gridstack.jQueryUI.js"></script>
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style type="text/css">
.grid-stack {
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
}
</style>
</head>
<body>
<div id="carousel-example-generic-v1" class="carousel slide widget-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$count_circle=0;
$data_circle = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($circle=mysqli_fetch_object($data_circle))
{ ?>
<li data-target="#carousel-example-generic-v1" data-slide-to="<?php echo $count_circle; ?>"
class="circle <?php if($count_circle==0){ echo "active"; }?>">
</li>
<?php
$count_circle++;
} ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$count_data=0;
$data_dash = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($dash=mysqli_fetch_object($data_dash))
{ ?>
<div class="item <?php if($count_data==0){ echo "active"; }?>">
<div id="grid_<?php echo $count_data ?>" class="widget-gradient widget-gradient-body grid-stack">
</div>
<script type="text/javascript">
LoadPage();
function LoadPage()
{
var options = {
float: false
};
$('#grid_<?php echo $count_data ?>').gridstack(options);
new function () {
this.serializedData = <?php echo $dash->data_show.";" ?>
this.grid = $('#grid_<?php echo $count_data ?>').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node, i) {
this.grid.addWidget($('<div id="induk"><div class="grid-stack-item-content">' + node.content + '</div></div>'),
node.x, node.y, node.w, node.h);
this.grid.movable('.grid-stack-item', false);
this.grid.resizable('.grid-stack-item', false);
}, this);
return false;
}.bind(this);
this.loadGrid();
};
var str = '<?php echo $dash->data_gen ?>';
var str_array = str.split(',');
for(var i = 0; i < str_array.length; i++) {
call_data(i);
}
function call_data(i){
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
var widget = $("#data_"+str_array[i]).val();
var convert_data = str_array[i];
$("#del_"+convert_data).remove(); //remove delete icon
$("#label_"+convert_data).remove(); //remove label
var height_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').height();
var width_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').width();
var formData = 'id_tr=<?php echo $dash->id_tr_halaman_dasboard ?>&id_tr_dt='+str_array[i]+'&id_tr_widget='+widget+'&width='+width_div_parent+'&height='+height_div_parent;
$.ajax({
type: "POST",
dataType: "html",
url: "element/get_data_dashboard.php",
data: formData,
success: function(msg){
if(msg == ''){
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html("");
}
else{
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html(msg);
}
}
});
}
}
</script>
</div>
<?php
$count_data++;
} ?>
</div>
</div>
</body>
</html>
element/get_data_dashboard.php
in Pastebin click here
<?php
include "connection.php";
$id_tr = $_REQUEST['id_tr']; //header dashboard
$id_tr_widget = $_REQUEST['id_tr_widget']; //id tr widget
$id_tr_dt = $_REQUEST['id_tr_dt']; //id tr detail
$width = $_REQUEST['width']; //width
$height = $_REQUEST['height']; //height
$mw_wg = mysqli_fetch_object(mysqli_query($con,"select * from tr_widget where id_tr_widget='".$id_tr_widget."'"));
$my_konek = mysqli_fetch_object(mysqli_query($con,"select * from connection where id_con='".$mw_wg->id_con."'"));
$sql_view = mysqli_fetch_object(mysqli_query($con,"SELECT query from sql_view where id_sql_view='".$mw_wg->id_sql_view."'"));
$id_type_widget = $mw_wg->id_type_widget;
if($my_konek->port=="" or $my_konek->port==null)
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
else
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name,$my_konek->port);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
// Image Slider
if($id_type_widget=="9"){
$RandomAccountNumber = uniqid();
?>
<center><div id="owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>" class="owl-carousel">
<?php
$list_value = $mw_wg->file_name;
$var=explode('***zzz****',$list_value);
$count = count($var);
foreach($var as $row) {
if (--$count <= 0) {
break;
}
?>
<div class="item"><img onerror="this.onerror=null;this.src='images/no_image.png';" style="height:<?php echo $height?>px; width:<?php echo $width?>px" src="images/images_video/<?php echo $row?>"></div>
<?php } ?>
</div></center>
<script>
$(document).ready(function() {
$("#owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>").owlCarousel({
autoPlay : true,
navigation : false,
singleItem : true,
pagination: false
});
});
</script>
<?php }
// Video
else if($id_type_widget=="7"){
$ext_file = end((explode(".",$mw_wg->file_name)))
?>
<head>
<link href="dist/js/videojs/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="dist/js/videojs/videojs-ie8.min.js"></script>
</head>
<body>
<video controls loop autoplay preload="auto" id="my-video" class="video-js" controls preload="auto" style="height:<?php echo $height?>px; width:<?php echo $width?>px" data-setup="{}" poster="images/fff.png">
<source src="images/images_video/<?php echo $mw_wg->file_name; ?>" type='video/<?php echo $ext_file?>'>
</video>
<script src="dist/js/videojs/video.js"></script>
</body>
<?php } ?>
See this link click here
I'm confused to remove whitespace when fullscreen mode.
Help Me Thank's

difficulties on locating javascript and css codeigniter

Hi how can i aces in view model
i saved my css and javascript inside the js folder and css folder inside the application in codeigniter how can i aces it i'm having difficulties to link them
www
application
-jsfolder
-jsfiles
-cssfolder
-cssFiles
<?php
//birds.php
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
}
<?php
//birds_model.php
class Birds_model extends CI_Model{
function get_bird($q){
$this->db->select('bird');
$this->db->like('bird', $q);
$query = $this->db->get('birds');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$row_set[] = htmlentities(stripslashes($row['bird'])); //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
}
}
bird_view.php
<style>
.ui-autocomplete-loading {
background: #fff url('../link/to/ajax-loading-image') right center no-repeat !important;
}
</style>
<link href="<?php echo base_url().'css/' ?>./css/jquery.ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url().'js/'?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url().'js/'?>/js/jquery.ui.js"></script>
<input type="text" id="birds" />
<script>
$(function(){
$("#birds").autocomplete({
source: "birds/get_birds" // path to the get_birds method
});
});
</script
it only display white screen tnx in advance guys

You should link your css and js file as:-
<link href="<?php echo base_url().'css/jquery.ui.css'; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url().'js/query.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'js/jquery.ui.js'; ?>"></script>

do your really need that 'dot' after your closing php tag?
<?php echo base_url(); ?>./
also remove extra leading slashes:
<link href="<?php echo base_url(); ?>css/jquery.ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.ui.js"></script>
p.s make sure that base_url is set properly in your config file: $config['base_url']='localhost/websitename/'
with a trailing slash

getElementById not getting the id in wordpress 3.3.1

i am building a wordpress site, twenty eleven theme. I want a widget area to be shown only on a certain page.
so added a javascript function to the <head> which is called by <body onload="show_collection_area">
The function called, since the console.log(obj.id) writes "text-2" to the console (which is the right id). But when i set visibilty to none in this function:
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
nothin happens. I tried calling the function from the page itself by using a button but the result is the same.
What am i doing wrong?
Thanks a lot!
PS the whole code:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Eleven
* #since Twenty Eleven 1.0
*/
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
</head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
});
});
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
function display_gallery(id)
{
//first we set all displays to none
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload = "show_collection_area()" <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><?php bloginfo( 'name' ); ?></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ( 'blank' == get_header_textcolor() ) :
?>
<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">

The value for "visibility" should be "hidden" when you want it to be hidden. The "none" value works for "display".

Categories