PHP dynamic include and javascript fade - Images not working - php

My site has dynamically included content through PHP and jQuery fading in/out the content of the site, in order for the page not to refresh.
The only problem is, since i added the the java fade in/out my images on the loaded content is not shown. The box for the image is shown, but it acts like there is image in the directory.
my html and php include from my index.php:
<body>
<div id="wrapper">
<div id="header">
<?php include('header.php') ?>
<div id="menu">
<?php include('menu.php') ?>
</div>
<hr class="topline" />
<hr class="bottom-line" />
</div>
<div id="content">
<?php
$content = $_GET['content'];
$pages = array('forside', 'menukort', 'hvemervi', 'Kontakt', 'catering');
if (!empty($content)) {
if(in_array($content, $pages)) {
$content .= '.php';
include($content);
} else {
echo 'Siden kunne ikke findes. Der må være sket en fejl! Gå tlbage til forsiden';
}
} else {
include('pages/forside.php');
}
?>
</div>
<div id="footer">
<?php include('footer.php') ?>
</div>
</div>
Here's a pastebin of my javascript fade in/out: http://pastebin.com/YN3pUvnq
Here's a live version of the site: http://wonzentest.wonzen.dk
Frontpage should contain a javascript gallery/slideshow coded like this:
<script class="secret-source">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 480,
width : 960,
responsive : true,
randomstart : true,
nexttext : '<div class="hovernavright"><img src="../Images/leftarrow.png" style="width: 40px; height: 40px;" /></div>',
prevtext : '<div class="hovernavleft"><img src="../Images/rightarrow.png" style="width: 40px; height: 40px;" /></div>',
usecaptions : true,
automatic : true
});
});
</script>
<div id="banner-slide">
<ul class="bjqs">
<li><img src="../Images/HQ/Wonzenmad.jpg" title="WONZEN ER THAT BOOMB" /></li>
<li><img src="../Images/HQ/Wonzenmad.jpg" title="Velkommen til Wonzen!" /></li>
<li><img src="../Images/HQ/Wonzenmad1.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad3.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/Wonzenmad2.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad4.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad5.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad6.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad7.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad8.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad9.jpg" title="Wonzen - Krydrer din hverdag!"></li>
<li><img src="../Images/HQ/wonzenmad10.jpg" title="Wonzen - Krydrer din hverdag!"></li>
</ul>
</div>
Everything worked fine until i started using the fade.
All other images that bother me are done with
<img src="../Images/HQ/imagename.jpg" />
EDIT:
For no apparent reason the images decided to work when uploaded to the remote server.. hmm..
Allthough when I press the frontpage menu button and see the frontpage the java slideshow is not displayed, or it is displayed but to only some of it(it's misplaced).
When you firdt load the page, the script works fine..
I'm so lost here.

Related

content parse with some exceptions in memory efficient manner

Below one is my sample data and what I tried using xpath. Here my aim is to modify all text in html by excluding script, style tags and few classes noparse, generic.
Here is link to my sample input and php script :
https://3v4l.org/urIBl#v7.4.21
can someone show some light towards right path ?
My input:
$html=<<<doc
<html>
<head>
<title>My page</title>
<script>
//<![CDATA[
$(function(){
$('.ajax').trigger('change');
})
//]]></script>
<style>ul li ol li{color;red;}</style>
</head>
<body>
<div>
<ul>
<li>Languages
<ol>
<li>PHP</li>
<li class='noparse'>C++</li>
</ol>
</li>
</ul>
<span>inline text</span>
<p class="generic">some long text data</p>
Stack Overflow
Google
<img class="img-responsive parse round red" src="" alt="round image" />
<img class="img-responsive noparse round red" src="" alt="square image" />
</div>
</body>
</html>
doc;
This is what I tried
<?php
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->preserveWhiteSpace = false;
$dom->loadHTML($html, LIBXML_SCHEMA_CREATE);
$xpath = new DOMXPath($dom);
$exclude='.generic,.noparse';
foreach ($xpath->query("//*/text()[not(#class='$exclude')]|//a/#title[not(#class='$exclude')]|//img/#alt[not(#class='$exclude')]") as $node)
{
$node->textContent=$node->textContent.' powered by sometext';
}
echo $dom->saveHTML();
?>
Expected results:
<html>
<head>
<title>My page powered by sometext</title>
<script>
//<![CDATA[
$(function(){
$('.ajax').trigger('change');
})
//]]></script>
<style>ul li ol li{color;red;}</style>
</head>
<body>
<div>
<ul>
<li>Languages powered by sometext
<ol>
<li>PHP powered by sometext</li>
<li class='noparse'>C++</li>
</ol>
</li>
</ul>
<span>inline text powered by sometext</span>
<p class="generic">some long text data</p>
Stack Overflow powered by sometext
Google
<img class="img-responsive parse round red" src="" alt="round image powered by sometext" />
<img class="img-responsive noparse round red" src="" alt="square image" />
</div>
</body>
</html>
This is what I'm getting from script ( This is not desired output )
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
powered by sometext<head>
powered by sometext<title>My page powered by sometext</title>
powered by sometext<script>
//<![CDATA[
$(function(){
$('.ajax').trigger('change');
})
//]]> powered by sometext</script>
powered by sometext<style>ul li ol li{color;red;} powered by sometext</style>
powered by sometext</head>
powered by sometext<body>
powered by sometext<div>
powered by sometext<ul>
powered by sometext<li>Languages
powered by sometext<ol>
powered by sometext<li>PHP powered by sometext</li>
powered by sometext<li class="noparse">C++ powered by sometext</li>
powered by sometext</ol>
powered by sometext</li>
powered by sometext</ul>
powered by sometext<span>inline text powered by sometext</span>
powered by sometext<p class="generic">some long text data powered by sometext</p>
powered by sometext<a href="https://stackoverflow.com" title>Stack Overflow powered by sometext</a>
powered by sometextGoogle powered by sometext
powered by sometext<img class="img-responsive parse round red" src="" alt>
powered by sometext<img class="img-responsive noparse round red" src="" alt>
powered by sometext</div>
powered by sometext</body>
powered by sometext</html>
EDITED
Here is edited script:
Notes:
You have following code. I am not sure what it is. I tried to search on net but I could not get any information. The parsing and therefore output goes wrong because of that syntax:
//<![CDATA[
<script>
If you know what it is and cannot figure out how to fix parsing please reply.
I am not sure whether you want to change attributes as well or not. I see your expected output has some inconsistencies so I did not spend more time on fixing things about attributes: First a href does not have excluded classes but it's class attribute expected to change. While for img it does not.
Google
<img class="img-responsive parse round red" src="" alt="round image powered by sometext" />
<?php
$html=<<<doc
<html>
<head>
<title>My page</title>
//<![CDATA[
<script>
$(function(){
$('.ajax').trigger('change');
})
//]]></script>
<style>ul li ol li{color;red;}</style>
</head>
<body>
<div>
<ul>
<li>Languages
<ol>
<li>PHP</li>
<li class='noparse'>C++</li>
</ol>
</li>
</ul>
<span>inline text</span>
<p class="generic">some long text data</p>
Stack Overflow
Google
<img class="img-responsive parse round red" src="" alt="round image" />
<img class="img-responsive noparse round red" src="" alt="square image" />
</div>
</body>
</html>
doc;
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->preserveWhiteSpace = false;
$dom->loadHTML($html, LIBXML_SCHEMA_CREATE);
$xpath = new DOMXPath($dom);
$excluded_tags = array("script", "style");
$excluded_classes=array('generic', 'noparse');
$nodes = $xpath->query("//*");
foreach ($nodes as $node)
{
if ($node && $node->nodeName) {
if (!in_array($node->nodeName, $excluded_tags)) {
if (0 < $node->childNodes->count() && "#text" === $node->childNodes[0]->nodeName) {
if (!$node->hasAttribute('class') || !in_array($node->getAttribute('class'), $excluded_classes)) {
$nodeValue = preg_replace('/\s+$/', '', $node->childNodes[0]->nodeValue);
if (0 != strlen($nodeValue)) {
$node->childNodes[0]->nodeValue = $node->childNodes[0]->nodeValue.' powered by sometext';
//echo "Node Name: ", $node->nodeName, " Node Child Count: ", $node->childNodes->count(), " Node Child Name: ", $node->childNodes[0]->nodeName, " Node Child Value: ", preg_replace('/\s+$/', '', $node->childNodes[0]->nodeValue), PHP_EOL;
if ($node->attributes) {
foreach ($node->attributes as $attribute) {
if ('href' != $attribute->nodeName) {
$attribute->nodeValue = $attribute->nodeValue.' powered by sometext';
}
}
}
}
}
}
}
}
}
echo $dom->saveHTML();
Output
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My page powered by sometext</title></head><body><p>
//
$(function(){
$('.ajax').trigger('change');
})
//]]>
powered by sometext<style>ul li ol li{color;red;}</style>
</p>
<div>
<ul>
<li>Languages
powered by sometext<ol>
<li>PHP powered by sometext</li>
<li class="noparse">C++</li>
</ol>
</li>
</ul>
<span>inline text powered by sometext</span>
<p class="generic">some long text data</p>
Stack Overflow powered by sometext
Google powered by sometext
<img class="img-responsive parse round red" src="" alt="round image">
<img class="img-responsive noparse round red" src="" alt="square image">
</div>
</body></html>
Image

How do I set default height and width to data coming from ckeditor (wysiwyg text editor) while displaying in the website through php

I am using the CKEditor as a text editor for my project and I am also uploading images in there. I could have saved the default height and width of the editor before inserting the data into the database, however, in order to have a fit-in screen for the Android and iOS, I have to set null value in the height and width in the preview box. And for the website before fetching the data I am using html_entity_decode. Everything works perfectly fine with html_entity_decode but the size of the image is ruining my webpage. Is there any way I can deal with the images coming to the CKEditor while displaying content on the website?
For the website, I want to set the default height to 500px and width to 900px.
I am getting data like this without html_entity_decode:
दूतावासले नेपाली कामदार कार्यरत कम्पनी र बिमा कम्पनीविरुद्ध मुद्दा लडेर क्षतिपूर्ति रकम उपलब्ध गराएको हो । ‘कुवेती कानुनले दिएको अधिकार प्रयोग गरी हामीले मुद्दा लडेर क्षतिपूर्ति दिलाइएको हो,’ राजदूत यज्ञबहादुर हमालले कान्तिपुरलाई भने, ‘घाइते र मृत्यु भएका श्रमिकका परिवारका तर्फबाट मुद्दा लडेका हौं ।’ <p><img alt="" src="/assets/editor/kcfinder/upload/images/sher_bahadur_deuba_X4KLNxAc7l.JPG" /></p> दूतावासले मुद्दा लड्न कुवेती वकिललाई प्रयोग गरेको हो । राजदूत हमालले प्रमाण भएमा उच्च क्षतिपूर्ति दिलाउन सकिने बताए । एउटै ब्यक्तिलाई ६४ हजार अमेरिकी डलरसम्म क्षतिपूर्ति दिलाइएको र सबैभन्दा बढी कार्यस्थल र सडक दुर्घटनामा मृत्यु हुने श्रमिकका परिवारले पाएका दूतावासले जनाएको छ । ‘
Is it possible to replace it with str_replace/css/js?
I have following lines of code in the file where I am not being able to set width and height of img tag:
<?php require 'inc/header.php';
if (isset($_GET['id']) && !empty($_GET['id'])) {
$id = $_GET['id'];
if ($id) {
$getNews = $news->getNewsById($id);
}
if ($getNews) {
$content = $getNews[0]->story;
$content = str_replace('<img ', '<img width="900" height="500" ', $content);
print_r($content);
exit;
}
}
?>
<div class="main">
<div class="container">
<!-- End of top adspace -->
<div class="row py-2 px-2">
<!-- Main Content Column-->
<div class="col-md-9">
<h1 class="py-3 text-md-center" style="margin: auto;"><?php echo $getNews[0]->title ?>
</h1>
<?php
$image = basename($getNews[0]->image);
if (isset($getNews[0]->image) && !empty($getNews[0]->image) && file_exists(UPLOAD_DIR.'news/'.$image)) {
$feature = UPLOAD_URL.'news/'.$image;
?>
<img src="<?php echo $feature ?>" class="img-fluid py-2 apple" style="width:900px; height: 600px">
<?php
} else {
$feature = "";
?>
<img src="<?php echo $feature ?>" class="img-fluid py-2 apple">
<?php
}
?>
<p class="ptype777 editor">
<?php echo html_entity_decode($getNews[0]->story) ?>
</p>
</div>
<!-- Sidebar -->
<div class="col-lg-3 col-xs-8 col-md-8 pt-2">
<div class="row" style="padding-top: 55px">
<img src="<?php echo FRONT_IMAGES_URL ?>template2.gif" alt="template1" class="img-fluid pt-4 apple">
<img src="<?php echo FRONT_IMAGES_URL ?>template3.gif" alt="template1" class="img-fluid py-2 apple">
<img src="<?php echo FRONT_IMAGES_URL ?>template4.gif" alt="template1" class="img-fluid py-2 apple">
<img src="<?php echo FRONT_IMAGES_URL ?>template5.gif" alt="template1" class="img-fluid py-2 apple">
</div>
</div>
</div>
</div>
</div>
My advice would be to either define the dimensions in CSS or use javascript to set the dimensions.
CSS option:
img {
width: 900px;
height: 500px;
}
Javascript option
Change image size with JavaScript
Another option is to use str_replace.
str_replace('<img ', '<img width="900" height="500" ', $content);
In the above scenario I assume that $content contains the Image tags you want to set the width and height to.

How to remove P tags surrounding img using jQuery?

I've got a webpage that is outputted through CKEditor. I need it to display the image without the <p></p> tags but I need it to leave the actual text within the paragraph tags so I can target it for styling.
I've tried to achieve this through the jQuery below that I found on another post here but it isn't working for me..
I have tried:
$('img').unwrap();
and I've tried:
$('p > *').unwrap();
Both of these don't work. I can disable the tags altogether from my editors config, but I wont be able to target the text on it's own if it's not wrapped in a tag.
The outputted HTML is:
<body>
<div id="container" class="container">
<p><img alt="" src="http://localhost/integrated/uploads/images/roast-dinner-main-xlarge%281%29.jpg" style="height:300px; width:400px" /></p><p>Our roast dinners are buy one get one free!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p > *').unwrap();
});
</script>
</body>
All help is appreciated!
Usually done using
$('img').unwrap("p");
but this will also orphan any other content (like text) from it's <p> parent (that contained the image).
So basically you want to move the image out of the <p> tags.
There's two places you can move your image: before or after the p tag:
$("p:has(img)").before(function() { // or use .after()
return $(this).find("img");
});
p {
background: red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<p>
<img alt="" src="http://placehold.it/50x50/f0b" />
</p>
<p>
Our roast dinners are buy one get one free!
</p>
</div>
<p>
<img src="http://placehold.it/50x50/f0b" alt="">
Lorem ipsum dolor ay ay
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
<p>
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
although notice that the above will not remove the empty <p> tags we left behind. See here how to remove empty p tags
Remedy
If you want to remove the empty paragraphs - if the image was the only child -
and keep paragraphs that had both image and other content:
$("p:has(img)").each(function() {
$(this).before( $(this).find("img") );
if(!$.trim(this.innerHTML).length) $(this).remove();
});
p{
background:red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<p>
<img alt="" src="http://placehold.it/50x50/f0b" />
</p>
<p>
Our roast dinners are buy one get one free!
</p>
</div>
<p>
<img src="http://placehold.it/50x50/f0b" alt="">
Lorem ipsum dolor ay ay
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
<p>
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
This will work for sure
var par = $(".par");
var tmp = par.find('.img').clone();
var parent = par.parent();
par.remove();
tmp.appendTo(parent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<p class="par">
<img src="https://webkit.org/demos/srcset/image-src.png" class="img" alt="">
</p>
</div>

PHP Variable Session Code Not Working

All pages on my bosses website initiate sessions, there is a variable on the property pages that is defined (or redefined) each time a user visits one. That variable is supposed to carry over to the contact page, where it gets inserted into the PHP contact form and sent along in an email to my boss, so that he knows which property people are contacting him about.
Here is the code I use to define the variable:
$_SESSION['property'] = "55-scholard-ph5";//Set Property Name
I have a generic PHP contact form I'm using that works fine, I also have
<?php // Start the session
session_start(); ?>
at the beginning of every page. This solution was working for about a month, but now it doesn't insert that variable.
Here is the complete HTML page code:
<!--FORM SESSION CODE-->
<?php
// Start the session
session_start();
?>
<!--FORM SESSION CODE-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1100">
<title>Boris Kholodov · 55 Scollard, Penthouse 5 · Toronto, Canada</title>
<meta name="description" content="View 55 Scollard, Penthouse 5 at Boris Kholodov's real estate website.">
<link rel="stylesheet" type="text/css" href="../design.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../javajq/jquery.touchslider.min.js"></script>
<script>
jQuery(function($) {
$(".touchslider").touchSlider({container: this,
duration: 800, // the speed of the sliding animation in milliseconds
delay: 5000, // initial auto-scrolling delay for each loop
margin: 3, // borders size. The margin is set in pixels.
mouseTouch: true,
namespace: "touchslider",
next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
pagination: ".touchslider-nav-item",
currentClass: "touchslider-nav-item-current", // class name for current pagination item.
prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
autoplay: true, // Activate auto-scrolling, choose either "true" or "false"
viewport: ".touchslider-viewport"});
});
</script>
</head>
<body bgcolor="#fafbff">
<!--FORM ADDRESS CODE-->
<?php
$_SESSION['property'] = "55-scholard-ph5";//Set Property Name
?>
<!--FORM ADDRESS CODE-->
<?php include('../navigation.html');?>
<!-- MAIN CONTENT -->
<div id="page-wrap">
<!--JAVASCRIPT DISABLED NOTIFICATION-->
<noscript>
<?php include('../noscript.html');?>
</noscript>
<!---------------------------------------- MOBILE SLIDER ---------------------------------------->
<div class="touchslider hideslide" style="text-align: center;">
<div class="touchslider-viewport" style="width:1000px; height:550px; overflow:hidden; position: relative;"><div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/1.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/2.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/3.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/4.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/5.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/6.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/7.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/8.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/9.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/10.jpg" class="round" width="1000" height="550" /></div>
</div>
</div>
<br /><br />
<!---------------------------------------- LEAVING FOR NOW, BUT DONT NEED IT ---------------------------------------->
<div style="text-align:center; height:5px; width: 1000px; position: relative;">
<span class="touchslider-prev" style="cursor:pointer; z-index: 40;"><span class="prevbutton"></span></span>
<span class="touchslider-next" style="cursor:pointer; z-index: 40;"><span class="nextbutton"></span></span>
</div>
</div>
<!---------------------------------------- DESKTOP SLIDER ---------------------------------------->
<div id="container" class="hidephone" >
<ul>
<li><img src="images/55-scholard-ph5/1.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/2.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/3.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/4.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/5.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/6.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/7.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/8.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/9.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/10.jpg" class="round" width="1000" height="550" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
<img src="images/spacer.gif" class="hidephone" />
<hr class="purple">
<br />
<!----------------------------------------MAIN INFO AREA-------------------------------------->
<article>
<section>
<div class="lefttextbig">
<header>
<h1 class="black cursive">Luxury Penthouse at the Four Seasons</h1>
<br />
<h2 class="black">$1,950,000 · 55 Scollard, Penthouse 5</h2>
</header>
<p class="black">
<br />
<span class="subtitle">CANADA'S MOST PRESTIGIOUS ADDRESS </span> Yorkville. Bloor. Four Seasons. Everyone knows. This is the most prestigious and coveted address in Canada. Luxurious, stylish, seductive, the new Four Seasons Hotel Toronto has already established itself as Toronto’s most famous meeting place. Its architectural pedigree, its personality and its name have successfully attracted those from Toronto and those from abroad.
<br /><br />
<span class="subtitle">ONLY THE BEST</span> Designed by architectsAlliance in collaboration with Page & Steele this hotel condo development demonstrates a contemporary design paired with a level of elegance that will satisfy the most discerning purchaser. The private residences offer the best in design and service.
<br /><br />
<span class="subtitle">360 DEGREE LUXURY</span> Penthouse 5 is a luxuriously finished residence, measuring 1265 precious square feet, offering you 11-foot ceilings and stunning views from floor-to-ceiling windows throughout. This suite is bright, impressive, modern, yet elegant. The layout features a discreet entrance area, an open living area, split bedrooms, 2 full baths and a 20ft balcony.
<br /><br />
<span class="subtitle">ALL YOU COULD ASK FOR — AND THEN SOME</span> The east tower is a private, exclusive, resident-only building. Its owners enjoy privacy coupled with easy access to all the benefits of Four Season living, including access to hotel amenities, facilities and services. Just steps away from five-star Yorkville shops and restaurants, and central Toronto metro stations.
<br /><br />
To schedule a viewing contact Boris Kholodov.<br /><br />
</p>
<hr class="purple">
<br /><br />
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.828667395075!2d-79.3884502!3d43.672532999999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34aedb4fae43%3A0xedbc5eb829dd0221!2s55+Scollard+St%2C+Toronto%2C+ON+M5R!5e0!3m2!1sen!2sca!4v1427829323609" width="650" height="350" frameborder="0" style="border:0"></iframe>
</div>
</section>
<!----------------------------------------MAIN INFO AREA-------------------------------------->
<!----------------------------------------DETAILED INFO---------------------------------------->
<section>
<div class="rightinfo">
<!-- Boris's Photo, Title and Contact Info-->
<?php include('boris-info.html');?>
<!-- <hr class="purple">
<p class="small">
<span class="italic">Open House Times:</span><br />
Sat 28<sup>th</sup> / 2:30pm–4:30pm<br />
Sun 1<sup>st</sup> / 2:30pm–4:30pm
</p> -->
<hr class="purple">
<a href="listing-book.php" style="text-decoration: none;">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
BOOK A SHOWING
</span>
</div>
</a>
<hr class="purple">
<a href="images/55-scholard-ph5/55-scholard-ph5-floorplan-boris.pdf" style="text-decoration: none;" target="_blank">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
VIEW FLOORPLAN
</span>
</div>
</a>
<hr class="purple">
<a href="listing-contact.php" style="text-decoration: none;">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
CONTACT BORIS
</span>
</div>
</a>
<hr class="purple">
<p class="small">
<span class="italic">Type:</span>
Downtown Penthouse
<br />
<span class="italic">Neighbourhood:</span>
Yorkville
<br />
<span class="italic">Square Footage:</span>
1265<sup>sf</sup> + Balcony
<br />
<!--<span class="italic">Lot Size:</span>
33<sup>ft</sup> × 128<sup>ft</sup>
<br /> -->
<span class="italic">Property Tax:</span>
$15,266 for 2014
<br />
<span class="italic">Bedrooms:</span>
2
<br />
<span class="italic">Washrooms:</span>
2
<br />
<span class="italic">Parking:</span>
1 Owned Underground
</p>
<hr class="purple">
<p class="small">
<span class="italic">Inclusions:</span>
<ul >
<li class="small">Miele Gas Cooktop and Oven, Sub-Zero Fridge, Panasonic Microwave, Dishwasher, Stacked Washer/Dryer</li>
<li class="small">All Existing Light Fixtures</li>
<li class="small">All Existing Window Coverings</li>
</ul>
<hr class="purple">
<p class="small">
To inquire further about this property please contact Boris.
</p>
</div>
</section>
<!----------------------------------------DETAILED INFO---------------------------------------->
</article>
<?php include('../footer.html');?>
</div>
<!-- MAIN CONTENT -->
<script src="../javajq/jquery-1.11.2.min.js"></script>
<script>
$(window).load(function(){
var pages = $('#container li'), current=0;
var currentPage,nextPage;
var timeoutID;
var buttonClicked=0;
var handler1=function(){
buttonClicked=1;
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
}
var handler2=function(){
if (buttonClicked==0)
{
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if (current >= pages.length-1)
current=0;
else
current=current+1;
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
}
}
$('#container .button').click(function(){
clearTimeout(timeoutID);
handler1();
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
});
</script>
<!--GOOGLE TRACKING-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61408930-1', 'auto');
ga('send', 'pageview');
</script>
<!--GOOGLE TRACKING-->
</body>
</html>
Here is the contact form code referenced in a separate PHP document:
<?php
session_start();
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Please use the form.
echo "Error, please return to last page.";
}
$property = $_SESSION['property'];
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$spambot = $_POST['spambot'];
if ($spambot != 'Yes') {
$spambot = 'No';
}
//Validate first
if($spambot == 'No')
{
echo "Please go back and check the 'I'm not a Spambot' box.";
exit;
}
if(empty($name)||empty($visitor_email)||empty($tel))
{
echo "Name, email and phone number are mandatory.";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
// Email information
$email_from = "boris#agentboris.com";
$email_subject = "Real Estate";
$email_body =
"PROPERTY: $property \n \n".
"NAME: $name\n \n".
"MESSAGE:\n
$message \n \n ".
"PHONE NUMBER: $tel\n \n".
"EMAIL: $visitor_email\n \n".
$to = "boris#agentboris.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: ../contact/thankyou.php');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
What is the problem?
You can experience the contact form by visiting this property page and clicking on any of the contact links. Please enter "community test" in the body of the form so that my boss knows its not a real client.
http://agentboris.com/listings/92-park.php
If you don't mind, I'd like to advise you not to use Session to do that, many users (like me) open multiple pages before viewing, so your property will get just the last one, sending the wrong property to your boss. Instead, you could pass this info via URL variable, changing the href property of the contact button to something like: http://agentboris.com/listings/listing-contact.php?property=55-scholard-ph5 on each page, and use the PHP $_GET["property"] in your contact's PHP code. You could use the contact form on each page too.
About the doubt of the solution stop working, make sure you aren't using #session_destroy() anywhere, neither resetting it elsewhere, sometimes I do something like: if (!$_SESSION["property"] = "") and in reality I'm resetting it to "". Certainly you are starting the session in the contact's page, right after <?php... you have to start the session to get the variable ok.
Hope it help you! Regards!
PS. you have a beautiful website!

Get img src inside an a href html dom parser

i am using the code bellow to get some data from an html with php simple html dom parser.
almost everything works great... the issue that i am facing is that i cant grab img src... my code is:
foreach($html->find('article') as $article) {
$item['title'] = $article->find('.post-title', 0)->plaintext;
$item['thumb'] = $article->find('.post-thumbnail', 0)->plaintext;
$item['details'] = $article->find('.entry p', 0)->plaintext;
echo "<strong>img url:</strong> " . $item['thumb'];
echo "</br>";
}
My Posts structure:
<article class="item-list item_1">
<h2 class="post-title">my demo post 1</h2>
<p class="post-meta">
<span class="tie-date">2 mins ago</span>
<span class="post-comments">
</span>
</p>
<div class="post-thumbnail">
<a href="http://localhost/mydemosite/category/sports/demo-post/" title="my demo post 1" rel="bookmark">
<img width="300" height="160" src="http://localhost/mydemosite/wp-content/uploads/demo-post-300x160.jpg" class="attachment-tie-large wp-post-image" alt="my demo post 1">
</a>
</div>
<!-- post-thumbnail /-->
<div class="entry">
<p>Hello world... this is a demo post description, so if you want to read more...</p>
<a class="more-link" href="http://localhost/mydemosite/category/sports/demo-post">Read More »</a>
</div>
<div class="clear"></div>
</article>
When you use .post-thumbnail you are getting the div element.
To get the src of the img element, use this:
$item['imgurl'] = $article->find('.post-thumbnail img', 0)->src;
I added the img selector and outputing the src directly into the variable.

Categories