How to call PHP function within HTML - javascript

I have a HTML page fully functional and based on Twitter Bootstrap.
In order to add a contact form (in that case within a modal window), I implemented a bit of PHP code to my file.
After having saved my file as index.php instead of index.html, for the PHP to be interpreted on the server, only the background appears, all content vanished.
Beginning of my code including the problematic PHP part before the main div starts :
<!DOCTYPE html>
<html lang="fr">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Manena.fr | Originaux, uniques et faits main, des cadeaux pour toutes les occasions</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/custom.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]-->
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Paprika" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include('success.php');
if(isset($_POST) && isset($_POST['nom']) && isset($_POST['email']) && isset($_POST['message'])){
if(!empty($_POST['nom']) && !empty($_POST['email']) && !empty($_POST['message'])){
$destinataire = "contact#site.com";
$sujet = "Demande de contact";
$message .= "Nom : ".$_POST['nom']."\r\n";
$message .= "Adresse email : ".$_POST['email']."\r\n";
$message .= "Message : ".$_POST['message']."\r\n";
$entete = 'From: '.$_POST['email']."\r\n".
'Reply-To: '.$_POST['email']."\r\n".
'X-Mailer: PHP/'.phpversion();
if (mail($destinataire,$sujet,$message,$entete)){
showSuccess();
} else {
echo "Une erreur est survenue lors de l'envoi du formulaire par email";
}
}
}
?>
HTML CODE
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Modal Privacy-->
<script type="text/javascript">
$("#modalPrivacy").click(function(event){
$("#modalPrivacy2").modal('show');
});
</script>
<!-- Modal Contact-->
<script type="text/javascript">
$("#modalContact").click(function(event){
$("#modalContact2").modal('show');
});
</script>
</body>
</html>
My question is : What prevents my page form displaying and eventually, how to fix it ?
For complementary info, here is the content of my success.php file (used to close the current modal and display a new one with a success message) :
<?php function showSuccess() {
echo'<script>$("#modalContact2").modal('hide');</script>'
echo '<script type="text/javascript">
$("#modalSuccess").modal('show');
});
</script>'
} ?>

Is it that your success.php file has wrong quotes, like so:
echo '<script type="text/javascript">
$("#modalContact2").modal(\'hide\');
$("#modalSuccess").modal(\'show\');
</script>'
You are using single quotes inside echo for .modal('show'). These single quotes end the echo statement. Escape these quotes like .modal(\'show\').
Hope this helps.

I just modified your code. you have some js errors for sure
function showSuccess()
{
echo "<script>$('#modalContact2').modal('hide');</script>";
echo "<script type='text/javascript'>
$('#modalSuccess').modal('show');
</script>";
}
You placed }); after $('#modalSuccess').modal('show'); line which is only closing braces but not opening. I removed that.I checked it with alert and its working.

replace your success.php code with this
function showSuccess() {
echo '<script>$("#modalContact2").modal(\'hide\');</script>';
echo '<script type="text/javascript">
$("#modalSuccess").modal(\'show\');
});
</script>';
}
Hope your main file ext is php not html. please verify it.

Related

using cropper.js after PHP upload doesn't work

I'm a learning student who is making a picture upload feature with HTML, CSS, JS, and PHP.
My final goal is to make a profile picture upload feature with cropping.
I found cropper.js would be a good tool for my idea, so I decided to use this.
And also, I found cropper.js is available to use with sweetalert2 that I've used to. official document(Sweetalert2 + cropper.js)
So I built the code that inspects file validity and uploads the raw file and loads that again to crop. But I couldn't use the feature of cropper.js and received a strange warning from the browser console that is SweetAlert2: Unknown parameter "willOpen".
(Every valid image could be uploaded without any error, but the image was shown but the draggable cropping bar did not show so I couldn't crop any image.)
Here is my code that the problem has occurred.
This code inspects whether the uploaded file is allowable and uploads that, and loads that file again to crop with cropper.js(now problem has occurred at that point.).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change profile picture</title>
<link rel="stylesheet" href="../../../css/font.css">
<link rel="shortcut icon" href="../../../favicon/favicon.ico">
<link rel="stylesheet" href="./css/uploadProfilePicture.css">
<?php include('../../../common/resource.html'); ?>
<script src="https://cdn.jsdelivr.net/npm/cropperjs#1.5.11/dist/cropper.js"></script>
<link href="https://cdn.jsdelivr.net/npm/cropperjs#1.5.11/dist/cropper.css" rel="stylesheet">
</head>
<body>
</body>
</html>
<style>
#cropperjs {
display: block;
max-width: 100%;
}
#preview {
width: 200px;
height: 200px;
margin-bottom: 10px;
border-radius: 100%;
}
</style>
<?php
session_start();
header('Content-Type: text/html; charset=utf-8');
if(!isset($_FILES)) {
?>
<script>
Swal.fire({
icon: 'error',
title: ':/',
footer: 'The file did not uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
die();
}
$tempFile = $_FILES['profileImage']['tmp_name'];
$fileTypeExtension = explode("/", $_FILES['profileImage']['type']);
$fileType = $fileTypeExtension[0];
$fileExtension = $fileTypeExtension[1];
$isExtensionAllowable = false;
switch($fileExtension){
case 'jpeg':
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
$isExtensionAllowable = true;
break;
default:
?>
<script>
Swal.fire({
icon: 'error',
title: 'error',
footer: 'Only pictures(jpeg, jpg, gif, bmp, png) can be uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
exit;
die();
}
if($fileType === "image"){
if($isExtensionAllowable === true) {
// allowable
try {
$savePath = "../../../asset/userdata/profilePicture/{$_SESSION['id']}.png";
move_uploaded_file($tempFile, $savePath);
// cropper.js ?
} catch (Exception $err) {
die($err -> getMessage());
}
?>
<script>
Swal.fire({
title: 'edit profile picture',
html: `
<img id="preview" src="<?php echo $savePath ?>">
<div>
<img id="cropperjs" src="<?php echo $savePath ?>">
</div>
`,
willOpen: () => {
const image = Swal.getPopup().querySelector('#cropperjs')
const cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
crop: throttle(function () {
const croppedCanvas = cropper.getCroppedCanvas()
const preview = Swal.getHtmlContainer().querySelector('#preview')
preview.src = croppedCanvas.toDataURL()
}, 25)
});
},
preConfirm: () => {
return Swal.getHtmlContainer().querySelector('#preview').src
}
})
</script>
<?php
}
} else {
?>
<script>
Swal.fire({
icon: 'error',
title: 'not image!!',
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
}
?>
In addition, the content of resource.html is here. It contains some external JS/CSS links to use at my page and there was no problem to load.
<!-- bootstrap -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<!-- end of bootstrap-->
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<!-- end of Bootstrap icon -->
<!-- toastr.js -->
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- end of toastr.js -->
<!-- sweetalert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
<!-- end of sweetalert -->
I need help to figure out the point to be fixed or what I have to do to reach my goal(I think my thought to implement my goal might be wrong.).
Do you have any ideas? It hasn't been long since I've experienced this part, so it's very hard to me.
Thanks in advance.

Adding stylesheets to head dynamically with jQuery and php

I am looking for to adding specific style-sheets to the <head></head> section of the current page. I can use jQuery, and the following jQuery snippet works. Problem is a php code calls those style-sheets and I need to integrate my php code into the jQuery, which I can't figure out how to do it.
Here is the php code:
<?php
$this->style()
->appendStylesheet($this->APP_STATIC_URL . '/templates/' . $this->APP_TEMPLATE . '/skins/' . $this->APP_SKIN . '/content_blog_view_{4}.css', 'screen')
->appendStylesheet($this->APP_STATIC_URL . '/templates/' . $this->APP_TEMPLATE . '/skins/' . $this->APP_SKIN . '/content_blog_view_{3}.css', 'screen')
->appendStylesheet($this->APP_STATIC_URL . '/templates/' . $this->APP_TEMPLATE . '/skins/' . $this->APP_SKIN . '/content_blog_view_{2}.css', 'screen')
->appendStylesheet($this->APP_STATIC_URL . '/templates/' . $this->APP_TEMPLATE . '/skins/' . $this->APP_SKIN . '/content_blog_view_{1}.css', 'screen');
echo $this->style()->minify();
?>
It generates the following html code:
<link href="http://redspark/templates/default/skins/default/content_blog_view_{4}.css" media="screen" rel="stylesheet" type="text/css" >
<link href="http://redspark/templates/default/skins/default/content_blog_view_{3}.css" media="screen" rel="stylesheet" type="text/css" >
<link href="http://redspark/templates/default/skins/default/content_blog_view_{2}.css" media="screen" rel="stylesheet" type="text/css" >
<link href="http://redspark/templates/default/skins/default/content_blog_view_{1}.css" media="screen" rel="stylesheet" type="text/css" >
I need to add the above mentioned php code in the following jQuery code (or any other better solution you know).
<script>
var $head = $("head");
var $headlinklast = $head.find("link[rel='stylesheet']:last");
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
if ($headlinklast.length){
$headlinklast.after(linkElement);
}
else {
$head.append(linkElement);
}
</script>
You can echo your PHP code in a Javascript variable and then use it.
Something like this:
var styles = "<?= echo $this->style()->minify(); ?>"

js bootpag not loading pagination

My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts

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

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 ); ?>

Popovers in Twitter Bootstrap

Okay, so I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FastCast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footer.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.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon1.ico"/>
</head>
<body>
<center>
<h1><b>Welcome to FastCast!</b></h1>
<div>
<p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
<hr></hr>
<div id="picDiv">
<img id="imgDisp" src="logo.jpg">
</div>
<p><font size="6">Enter you location to get started.</font></p>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
</div>
</form>
<p><i>Press enter to continue.</i></p>
<a id="test">Click me</a>
<script>
window.onkeydown = function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("Location").value;
var last2 = x.slice(-2);
alert(last2);
}
}
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</center>
</body>
<div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>
Towards the end I have a link that says "Click me". As you can see, in the script tags that follow, I have a bit of code that looks like this:
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
I was hoping that this code would active a popover when the link is clicked, but for some reason, it doesn't work. Nothing happens at all. Why is this, and how can I properly make a popover in Bootstrap and then have it display a JavaScript variable?
Thanks!
You are missing some things in your popover element <a> tag, have the format be something like this:
<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>
Then it should work, for example: http://jsfiddle.net/52VtD/1983/

Categories