I'm just wondering how social media website adds a link into there popups on there first image to load the next new image into the the same popup div.
I have the first image in my pop up and as you can see I tried using a different page to load in where all the functionality works.
<? if($user2_id==$_SESSION['id']){
$cover="SELECT coverphoto_id,coverphoto from coverphotos WHERE coverphoto_userid='$user1_id'";
$rescover=mysqli_query($mysqli,$cover) or die(mysqli_error($mysqli));
$rowcover=mysqli_fetch_assoc($rescover);
?>
<script>
function popup(){
$("#popUpDiv").load('include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
$("#blanket").show();
$("#popUpDiv").show();
}
</script>
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
<a href="#" onClick="popup('popUpDiv')" >X</a>
</div>
<a href="#" onClick="popup('popUpDiv')" ><div id="usercover" >
<? echo "<img id=\"coverimage\" border=\"0\" src='coverimages/".$rowcover['coverphoto']."?".time()."' width=\"600px\" onerror='this.src=\"coverimages/nocover.png\"' alt='onerror='this.style.height='300px'>";
?>
Problem I'm facing is that the previous and next links in the loaded page don't load the next new data inside the popup div, they navigate to the page.
`include/covermedia.userimage.php?pid=".$photo_prev['coverphoto_id']."'`
Is there any simple way I could achieve this.. even by not having to load a page into the popup?
if you're changing page locations, which it sounds like you are, put an iframe where you have the div (or inside your div) and change the iframe src to your new URL:
$("#popUpIFrame").attr('src','include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
Related
Iam trying to have 3 buttons, and when i press one, it will show the content of a php file. This is what i have done so far:
In the main Html file:
<div class="buttons">
<a class="showSingle" target="1">Logg</a>
<a class="showSingle" target="2">Saker</a>
<a class="showSingle" target="3">Rediger Kunde</a>
</div>
<div id="div1" class="targetDiv"><?php include 'php/loggselect.php'; ?></div>
<div id="div2" class="targetDiv">Saker</div>
<div id="div3" class="targetDiv">Rediger </div>
And later in the same file:
<script type="text/javascript">
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>
Have two problems: When I reload the page, all 3 divs are showing, I have to press one of the "buttons" to only show the content of that spesific button.
The next and biggest problem is that this is working fine as long as it is plain text. But when I use <?php include 'php/loggselect.php'; ?> it will no longer show / hide. The php file should display a table with search result from my database. But it does not work when the php only contains `
echo 'testing';
?>` either. Any soulution?
Thanks!
Problem #1: You can do,
CSS: .hiddenDiv {display:none;}
And add this class to every div
$(function(){
$(".showSingle").eq(0).trigger("click");
});
Problem #2: Do
var _var1 = "variableone";
$("#div1").load('php/loggselect.php?v1='+_var1+'&v2='+_var1);
Don't do <?php ... ?>
I have a page that loads a bunch of PHP chunks which take a lot of time.
They are initially hidden, until the user pops them open with a jQuery slideToggle.
Is there any way to make the HTML load first, and load the PHP after?
Here are the relevant snippets:
<script type="text/javascript">
jQuery(function($){
$('a.toggler').click(function(){
$(this).next().slideToggle('slow');
return false; //ensures no anchor jump
});
});
</script>
...
<div class='gallerysection'>
<a href='#' class='toggler'>Logos & Type</a>
<div class='toggle'><?php $album='1755641';include('VimeoAlbumSimple.php'); ?></div>
<a href='#' class='toggler'>Infographics & UIs</a>
<div class='toggle'><?php $album='1755635';include('VimeoAlbumSimple.php'); ?></div>
</div>
The include('VimeoAlbumSimple.php') loads a bunch of images and links from vimeo, and each call takes several seconds to load. There are more than 10 on the page.
This is VimeoAlbumSimple.php:
require_once('/home/dzg/zinclabs.com/assets/vimeolib.php');
$vimeo = new phpVimeo('807d405c3bf97d7c20060dabce349b6a', '9cc9d85a3b91b1a7');
$vimeo->setToken('274e2c915371a405ac1ec1cd7c3a72a5','3fe84c74bd6b4a9f736a41cb5709a76ec222686c');
$result = $vimeo->call('vimeo.albums.getVideos', array('album_id' => $album,full_response => '1'));
$videos = $result->videos->video;
echo '<div class="gallery">';
foreach ($videos as $video) {echo '
<div class="item">
<a href="http://player.vimeo.com/video/'.$video->id
.'?autoplay=1&title=0&byline=0&portrait=0&wmode=transparent" title="'
.$video->title.'" class="zoombox zgallery1">'
.'<img src="posters/'.$video->id.'.jpg" />'
.'<span class="text">
<span class="title">'.$video->title.'</span>'
.'<span class="duration">'.ltrim(gmdate("i:s", $video->duration),"0").'</span>'
.'<span class="description">'.nl2br($video->description).'</span>'
.'<div class="clear"></div>
</span>
</a>
</div>';
}
echo '</div>';
You cannot delay PHP processing after HTML has rendered because PHP is what produces the HTML in the first place.
What you can do is use AJAX to load pieces of the web page after the "main" layout has loaded. For example:
<div class='gallerysection'>
<a href='#' class='toggler'>Logos & Type</a>
<div class='toggle' data-url="VimeoAlbumSimple.php?album=1755641"></div>
<a href='#' class='toggler'>Infographics & UIs</a>
<div class='toggle' data-url="VimeoAlbumSimple.php?album=1755635"></div>
</div>
jQuery(function($){
$('.gallerysection .toggle').each(function(){
var $this = $(this);
$this.load($this.data("url"));
});
});
Here I have used an HTML5 data attribute to associate each div in the slideshow with the URL that will render its contents. When the DOM is ready jQuery fetches this url with .data and makes an AJAX request with .load to fetch the HTML and insert it inside the (initially empty) placeholder.
I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">
I had a PHP file that properly generates an image that I need. In my main page, there is a link named "View Image". So I put an < a href > tag in the "View Image" so that when it is clicked the image will load. However, when "View Image" was clicked, the whole page will load the image, which is not what I wanted. How will I code it in such a way that it will be just a part my page (e.g. just a small image within the site, not the whole webpage)?
Thanks!
Use an <img> tag to embed the image inside of the page.
<img src="path/to/img.png">
Instead of linking to it.
Try this
//HTML
Show Image
<div id="pre" >
<img src="img.jpg" />
</div>
//Javascript
<script type="text/javascript" >
document.getElementById("pre").style.display="none";
function disp()
{
if(document.getElementById("pre").style.display="none")
{
document.getElementById("pre").style.display="";
}
else
{
document.getElementById("pre").style.display="none";
}
return false;
}
</script>
So I have a website that navigates by scrolling through a pane of DIVs that's wrapped inside a main DIV via. JQuery/javascript: http://plugins.jquery.com/project/ScrollTo
E.g.
<div id="content" style:"overflow:hidden; width 800px;">
<div id="home" class="page"></div>
<div id="about" class="page"></div>
<div id="support" class="page"></div>
</div>
It navigates and scrolls fine, but attempting to provide dynamic URLs for the pages without breaking the scrolling feature (e.g. mywebsite.com?p=home) brings a bit of trouble.
So depending on what the GET request returns, I want the PHP script to automatically set the scroll position on page load; as the scroll bars are hidden, and can only be set via. javascript.
What is the best method for this?
Probably something like this
<script>
var goTo = '<?php echo (isset($_GET['p']) ? $_GET['p'] : "default_value"); ?>';
(function($){
$(document).ready(function(){
functionThatScrolls(goTo);
});
}(jQuery));
<script>
I would do it like this, just print the value of the $_GET['p'] into the script, just make sure to print a default value, and maybe sanitize the value of p someone could insert something into it.
hope it helped.
May I suggest simply using plain old anchor tags?
The way you've described your site doesn't seem to need all this js magic in order to achieve the effect you're looking for...
<div>
<a name="home">
<div>
</div>
</a>
<a name="pix">
<div>
</div>
</a>
<a name="about us">
<div>
</div>
</a>
<a name="contact">
<div>
</div>
</a>
</div>
Then, links to http://www.mywebsite.com/#home will go do what you're looking for, plus google will index it as a subsection of http://www.mywebsite.com/
I think if you put a ! before your anchor tag names, google will actually index each as a separate page.
EDIT: Go here, and scroll down to "Step-by-step guide".
Here is something I use to get the $_GET vars:
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var $_GET = getQueryParams(document.location.search);
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('#'+$_GET.p).offset().top},
'slow');
});