I've been trying to learn most of this as I go so as with previous questions I've posed some of this may seem simplistic or blatantly over my head - with that said I learn best through peer explanation/example/advice so thanks in advance.
I have used what I've learned here so far to build the basic structure of my personal website. The concept is an right aligned accordion menu that remains from page to page while the content and backgrounds in the area to the left will change based on the menu selection - fundamentally like frames or iframes used to look.
THE PROBLEM:
I have some js knowledge and I know that I can cycle some of the content out via getElementById but as these will be in a gallery I didn't want to drag my speed down by loading 54+ images in the background. I also know that I can just make the thumbnails in the sidebar link with php and just load the page entirely but as I don't want the menu to change I've been trying to figure out the best method to go about this. So far I've heard mention of PHP, JQuery and AJAX (which I know by name but is new to me). Below is an example of the code and what I want to do:
<body>
<div id="all">
<div id="live-area">
<?php include("blog.php") ?>
</div>
<div id="side-bar-area">
<div id="sidebar-header">
<h3>Title</h3>
<h1>Title</h1>
</div>
<div id="nestedAccordion">
<h2>Portfolio</h2>
<div>
<h3>Branding</h3>
<div>
<ul>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
<img src="images/thumbs/example5.jpg"/>
<img src="images/thumbs/example6.jpg"/>
<img src="images/thumbs/example7.jpg"/>
<img src="images/thumbs/example8.jpg"/>
<img src="images/thumbs/example9.jpg"/>
</li>
</ul>
</div>
<h2>Blog</h2>
<div>
<ul style="margin:0px;">
<li>entry 1</li>
<li>entry 2</li>
</ul>
</div>
<h2>About</h2>
<div>
<ul style="margin:0px;">
<li>About</li>
<li>Resume</li>
<li>Accolades</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Based on the above, what I want is that whenever any of the items in the menu such as <img src="images/thumbs/example1.jpg"/> are selected it will change the content of <?php include("blog.php") ?> without reloading the page.
Firstly, is this doable? And secondly, does anyone have advice for a novice in terms of this - either basic tutorials or a how-to for the layman?
As you added jquery to your tags, you could use AJAX to perform a server side request and load the new content and replace the existing one.
$.ajax({
url: 'http://example.org/other-page.php',
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#live-area').html(data);
});
Try this,
In html,
<div id="live-area">
<?php include("blog.php") ?>
</div>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
</li>
In script,
<script>
$('.thumbs a').click(function(){
var page = $( this ).attr('data-page');
$.ajax({
type:'POST',
url:page,
success: function(response){
$('#live-area').html(response);
}
});
})
</script>
Related
I'm new to PHP and i use the include function to include a header file that has my db connections and my menu. On a body page I'm using a iframe to include a aside that needs to go on many different pages. The issue arises when i hit click on one of the hyperlinks of the aside that is in the IFRAME it will take me to the proper page BUT will RE-include the header in that portion of the code. I was wondering if there is any alternatives OR ways to insure the header doesn't reload in my iframe. Here is a copy of my code.
Main PAGE
<?php
include_once("include/header.php");
?>
<div id="content">
<div id="left" class="sidebar">
<iframe src="aside.php" height="550" frameborder="0" width="210" scrolling="no" allowtransparency="true" rel="nofollow"></iframe>
</div>
Aside page
<div class="imgholder">
<p class="employeename">Pablo Israel Penaloza</p>
<img src="img/Pablo-Peñaloza.jpg" width="202" height="150" class="imgemployee">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Informacion Personal</li>
<li>Contacto</li>
<li>Contact de Emergencia</li>
<li>Dependientes</li>
<li>Imigracion</li>
<li>Deberes</li>
<li>Salario</li>
<li>Supervisor</li>
<li>Calificaciones</li>
<li>Membresias</li>
</ul>
</div>
<!--End sidebarmenu1-->
</div>
Thank you
You'll need to use javascript for the detection, or make separate URLs for pages that will be included in the iframe. This should help you:
Check if site is inside iframe
To not use an iframe would be best.
It's much easier if you just use include(). You can make the content that would reside in the iframe inside of a scrolling DIV instead. Modern sites do this and update the <div> with AJAX.
To make it scroll
<div style='width:210px;height:550px;overflow:auto'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>
Static
<div style='width:210px;height:550px;'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>
I am having a little difficulty passing some client side data into a third party plug-in.
I am trying to get a plug-in option to work off a variable that is created and populated via a user clicking on the <li>'s below.
Brief:
I have some HTML that acts as the handler for the interaction.
<ul class="subpage-list" id="intro-subpage-list">
<li data-slide="1">slide 1</li>
<li data-slide="2">slide 2</li>
<li data-slide="3">slide 3</li>
<li data-slide="4">slide 4</li>
<li data-slide="5">slide 5</li>
<li data-slide="6">slide 6</li>
</ul>
When the user clicks on any of the <li>'s I have the following code:
$("#intro-subpage-list li").click(function() {
var slideID = $(this).attr('data-slide');
$("body").css('overflow','hidden');
$("#intro-overlay").fadeIn(1000,function() {
$("#intro-subpage").show();
});
});
The HTML that loads after the JS interaction is as follows:
<div id="intro-overlay" class="overlay">
<div id="overlay-close">X</div>
<div id="loading"></div>
<section id="intro-subpage">
<div class="ls-layer">
<img class="ls-bg" alt="layer1-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/1.jpg">
</div>
<div class="ls-layer">
<img class="ls-bg" alt="layer2-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/2.jpg">
</div>
</section>
</div>
The code that loads and controls the plug-in is as follows:
$(".overlay section").layerSlider({
autoStart: false,
imgPreload: true,
slideDelay: '6000'
});
There is an option for this plug-in called "firstLayer" which to me makes perfect sense to be the option that would control the slider to load the correct slide dependant on the <li> that was clicked.
I have a file called functions.php that handles the HTML and a file called jquery.php that handles the plug-in and the JS.
If I have missed anything important please request and I shall edit this post with those details.
Thanks in advance.
Dan.
As no one was able to help with this question I went ahead and tried again for the solution to which I realised that creating my own plug-in; although time consuming, was the best option as I could tailor the plug-in to work exactly how I wanted.
Thank you to all who at least looked at the question and possibly thought about it.
I am working on premiumepress - RealtorPress child theme and currently having an issue with the menu.
I actually use the PremiumPress PHP code to show the menu
<?php echo $ThemeDesign->LAY_NAVIGATION(); ?>
I wrap this code under my CSS like:
<ul class="sf-menu">
<?php echo $ThemeDesign->LAY_NAVIGATION(); ?>
</ul> <!-- END .sf-menu -->
I'm using Superfish for the menu, but I am unable to understand why its' not working properly as I use this plugin correctly.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish({
delay: 200,
animation: {opacity:'show',height:'show'},
speed: 'fast',
autoArrows: false,
dropShadows: false
});
});
</script>
But when I see the home page ... I discover there are some irrelevant div's inside the menu..
<div class="dropdown_1column"> <div class="col_1 firstcolumn">
please check the real link to get idea .. what i am talking about :
http://www.ruralpropertyagents.com/
So please help me get rid of this ..
Your hunch is correct - remove those div elements and you'll be fixed. I used fiddler to remove them from the markup and it cleared up the issue immediately. They currently wrap all of your nested unordered lists.
When all is corrected, the structure should resemble the following:
<ul class="sf-menu">
<li>Home</li>
<li>Commercial Sales
<ul>
<li>Industrial Units for Sale</li>
<li>Office Blocks for Sale</li>
</ul>
</li>
</ul>
Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?