I created a new WordPress theme. When I moved it into an IIS webserver it fails.
Here's my code:
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function()
{
var i = Math.round((Math.random()) * info.length);
if (i == info.length) --i;
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}
else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;
When I ex. tried to
Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"
I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem
If you want to use the <Script> tag, you need to close the php tag, in here:
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
So it should look like that:
?>
<script>
[..]
</script>
<?php
The best practice it that you should place the JS either in at the top or bottom of your file or in another file.
The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.
Here you go with something that might assist:::
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
?>
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function() {
var i = Math.round((Math.random()) * info.length);
if (i == info.length){ --i; }
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
Related
My .load() doesn't execute JavaScript in loaded HTML file.
I already try the answers in anothers same thread but I can't solve my issue.
Here is my code :
index.php
<?php
session_start();
if(empty($_SESSION['username']))
{
$_SESSION = array();
//setcookie('auth', 'nop^^' , time() - 3600, '/', $_SERVER["HTTP_HOST"], false, true);
session_destroy();
header('Location: ../../frontsite/index.php');
exit();
}
function menu_mode($requestUri)
{
$user_type = $_SESSION['admin'];
if ($user_type == $requestUri)
echo 'class="menu_section show"';
else {
echo 'class="menu_section hidden"';
}
}
switch ($_SESSION['admin']) {
case "admin":
$pages = array(
'admin_tableau_bord' => 'admin_tableau_bord',
'admin_conseilleres_liste' => 'admin_conseilleres_liste',
'admin_conseilleres_gestion'=> 'admin_conseilleres_gestion',
'admin_liste_clients' => 'admin_liste_clients'
);
$page = isset($_GET['page']) ? $_GET['page'] : 'admin_tableau_bord';
if(!array_key_exists($page, $pages)) {
$page = 'admin_tableau_bord';
}
break;
case "user":
$pages = array(
'cons_tableau_bord' => 'cons_tableau_bord',
'cons_planning' => 'cons_planning',
'cons_liste_clients' => 'cons_liste_clients',
'cons_gestion_clients' => 'cons_gestion_clients'
);
$page = isset($_GET['page']) ? $_GET['page'] : 'cons_tableau_bord';
if(!array_key_exists($page, $pages)) {
$page = 'cons_tableau_bord';
}
break;
}
require_once('../../frontsite/pages/db_connect.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
ALL META & LINKS
</head>
<body class="nav-md">
<div class="container body">
... blablabla ...
<?php
// affichage des liens du menu
$i="0";
foreach($pages as $key => $value) {
$en_cours = ($key == $page) ? ' id="en_cours"' : ''; // test page en cours
$href[$i] = ' href="#" data-target="'.$key.'"'.$en_cours;
$i += 1;
}
?>
<h3>Administrateur</h3>
<ul class="nav side-menu">
<li><a class="dyn_link" <?php echo $href[0]; ?>><i class="fa fa-home"></i> Tableau de bord </a></li>
<li><a><i class="fa fa-female"></i> Conseillères <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a class="dyn_link" <?php echo $href[1]; ?>>Liste</a></li>
<li><a class="dyn_link" <?php echo $href[2]; ?>>Gestion</a></li>
</ul>
</li>
<li><a class="dyn_link" <?php echo $href[3]; ?>><i class="fa fa-list"></i> Liste clients </a></li>
... blablabla ...
<!-- page content -->
<div class="right_col" id="content_include" role="main">
<?php
include("../production/pages/$page.inc.php");
?>
</div>
... blablabla ...
<!-- Include jQuery + ALL OTHER SCRIPT -->
<script src="../production/lib/jquery.js"></script>
<!-- Load content Scripts -->
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('.dyn_link'),
container = $('#content_include');
// Fire on click
$(document.body).on('click','.dyn_link', function(event){
event.preventDefault();
// Set $this for re-use. Set target from data attribute
target = $(this).data('target');
// Load target page into container
container.load('./' + target + '.inc.php');
// Stop normal link behavior
return false;
});
});
</script>
</body>
</html>
My incuded files just contain html code.
I am sure i make mistake in my way to load the content included.
Sorry for the heavy block but you have all the infos to help me if possible.
Thanks a lot.
I am making my first steps learning to code. I made some courses on Internet and now I'm continue learning from the experience while I build a Wordpress child theme.
The thing is that I'm making an image slideshow. I found this great and simple one in w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self.
It's really fine but there are some problems if I want to use it in Wordpress.
I have a post type template with some fields that I build using the Advanced custom fields app. For the moment I have 10 images fields to make the slideshow.
So it means that this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content" style="max-width:800px;position:relative">
<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
Becomes this in Wordpress:
<?php get_header(); ?>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div>
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>
</div><!-- .content-area -->
<a class="homelink" href="http://localhost/wordpress/">Sarah Morris</a>
<?php get_footer(); ?>
Now the problem is that I have to upload 10 images in all my posts. If one day I upload only 8 images for example, I will see the 8 images but I will also see two blank spaces because of the other image fields that I'm not using.
After some days trying to find a solution, I found that I have two options to do it:
1) Using the repeater field of the Advanced custom fields plugin.
2) Using this code:
<?php if(get_field("image") != ""): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
The repeater field is a premium feature. I don't want to pay for a plugin, I prefer to learn how to make by my self so I decided to use the second option.
Now the problem is that the second option doesn't work correctly. It doesn't make what I want: To make an Slideshow without blank spaces when I'm using less than 10 images.
I know that this code is really near from the objective that I want to achieve. Do you have some suggestion?
You can hide empty fields, here's the link
So your php code should probably look something like this:
<?php if( get_field("image") ): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
Complete Tutorial - default WP Twenty Sixteen theme used
Here's the suggestion of how to make this work - tested and working 100%
Navigate to "Custom Fields"
In the "Field Groups" create a new one and name it "slider" for example
Click "+ Add Field" button and you should setup your field like this
Repeat this for as many images you want to appear in the slider
in the "locations settings" setup the condition where you want your slider to appear, here's the example - this one appears on all pages and posts
Hit "Publish" button and your slider is ready
Page Template code
I suggest you to create a custom page template for this, although it's not necessary
<?php
/**
* Template Name: Example Template
*
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
get_header();
// get ACF values
$image = get_field('image');
$image2 = get_field('image_2');
$image3 = get_field('image_3');
?>
<div id="primary" class="content-area" style="position:relative;">
<main id="main" class="site-main" role="main">
<?php // 1st image
if( !empty($image) ): ?>
<div class="mySlides"><img style="width:100%;" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endif; ?>
<?php // 2nd image
if( !empty($image2) ): ?>
<div class="mySlides"><img style="width:100%" src="<?php echo $image2['url']; ?>" alt="<?php echo $image2['alt']; ?>" /></div>
<?php endif; ?>
<?php // 3rd image
if( !empty($image3) ): ?>
<div class="mySlides"><img style="width:100%" src="<?php echo $image3['url']; ?>" alt="<?php echo $image3['alt']; ?>" /></div>
<?php endif; ?>
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>
</main><!-- .site-main -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<?php get_sidebar( 'content-bottom' ); ?>
Or Another simpler solution:
using php empty
if( !empty(get_field('image')) ): ?>
<div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>
if( !empty(get_field('image_2')) ): ?>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<?php endif; ?>
if( !empty(get_field('image_3')) ): ?>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<?php endif; ?>
Try like this first - with your existing code
My goal is to use ACF plugin to pass custom content to fancybox title area.
I load fancybox when there is images to display.
Currently i have this code to start with. How can i use ACF fields with fancybox so that every image gets its own custom field content?
For example output a link inside customHTML and a custom title using $color_desc .
Thanks!
<?php if (get_field('c_i')) { ?>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.js"></script>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.pack.js"></script>
<link href="<?php echo THEME_BASEURL?>/js/jquery.fancybox.css" rel="stylesheet">
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect: "fade",
nextEffect: "fade",
prevEffect: "fade",
padding: 0,
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
var customContent = "<div class='customHTML'>My custom content</div>";
this.title = this.title ? this.title + customContent : customContent;
},
afterShow: function () {
$(".fancybox-outer").after($(".fancybox-title"));
}
});
</script>
<div class="color_img">
<ul>
<?php
if( have_rows('c_i') ):
while ( have_rows('c_i') ) : the_row();
$image = get_sub_field('c_if');
$color_desc = get_sub_field('c_d');
$image_url = $image['sizes']['colors'];
$image_url_larger = $image['sizes']['large'];
?>
<li>
<a class="fancybox" rel="gallery01" href="<?php echo $image_url_larger; ?>"><img src="<?php echo $image_url; ?>"></a>
<div><?php echo $color_desc; ?></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
<?php } ?>
I am having a problem with my website.
The padding-top of div class="row slide-content" is acting weird.
For some slides it is about 223px and for other slides it uses a different padding.
PHP
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="home-slider">
<ul class="slides">
<?php while ($slide =& $loop->next()): ?>
<li>
<div class="row slide-content">
<div class="large-10 large-centered columns text-center">
<?php if ( ! empty( $slide->button ) ) : ?>
<div class="SLIDERLOGO">
<?php echo $slide->button; ?>
</div><?php endif; ?><?php if ( ! empty( $slide->ititle ) || ! empty( $slide->caption ) ) : ?>
<div class="hero-title">
<div class="large-3 columns nopad border-bottom">
</div>
<div class="large-6 columns text-center">
<?php if ( ! empty( $slide->ititle ) ) : ?>
<h4 class="text-white alt-h">
<?php echo $slide->ititle; ?></h4><?php endif; ?>
</div><?php if ( empty( $slide->ititle ) ) : ?>
<div class="large-6 columns nopad border-bottom">
</div><?php endif; ?>
<div class="large-3 columns nopad border-bottom">
</div>
<h1 class="text-white">
<?php echo $slide->caption; ?></h1>
</div><!--end of hero title-->
<?php endif; ?>
</div>
</div><img alt="<?php echo esc_attr( $slide->alt ); ?>" class=
"slider-bg" src=
"%3C?php%20echo%20esc_attr(%20$slide-%3Eimg%20);%20?%3E">
</li><?php endwhile; ?>
</ul>
</div><!--end of Home slider-->
</body>
</html>
The logo is inserted here
<?php echo $slide->button; ?>
Both logo's are exactly the same dimensions
JS
// Append HTML 's as CSS Background for slides
// also center the content of the slide
jQuery('.home-slider .slides li').each(function () {
var imgSrc = jQuery(this).children('.slider-bg').attr('src');
jQuery(this).css('background', 'url("' + imgSrc + '")');
jQuery(this).children('.slider-bg').remove();
var slideHeight = jQuery(this).height();
var contentHeight = jQuery(this).children('.slide-content').height();
var padTop = (slideHeight / 2) - (contentHeight / 2);
jQuery(this).children('.slide-content').css('padding-top', padTop);
});
It wont happen every time but sometimes the padding between the logo and the top of the page changes. I hope i have explained wel enough :)
Many thanks!
Daan
try running your code on $(window).load(function() { }); instead of at the bottom of the page, chances are if you are working with larger slide images that not all of them are fully loaded before your calculations are applying.
The new code would look like this...
jQuery(window.load(function() {
jQuery('.home-slider .slides li').each(function () {
var imgSrc = jQuery(this).children('.slider-bg').attr('src');
jQuery(this).css('background', 'url("' + imgSrc + '")');
jQuery(this).children('.slider-bg').remove();
var slideHeight = jQuery(this).height();
var contentHeight = jQuery(this).children('.slide-content').height();
var padTop = (slideHeight / 2) - (contentHeight / 2);
jQuery(this).children('.slide-content').css('padding-top', padTop);
});
});
Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066