If you guys check out this webpage:
http://www2.scandvision.se/oresund10/
How have they done this background fade in fade out?
When i check the source this
<img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />
and i think theres some kind of script maybe php or js, or both, that every 5 sec changes the background:
images/body-background-1.jpg
images/body-background-2.jpg
images/body-background-3.jpg
and so on..
So how did they do this? an example would be great, as i want to learn how to do that. If i was going to do something like this i think i would only manage to do a script in php that randomize everytime you refresh.
Thank you, this will expand my knowledge
I did that one time on a website, I use "Prototype JS" and "Script Aculo US" but you can easily do the same thing without these library. You can see an example here: www.envolulm.fr
I extract below and translate some comment of my code:
/* In my HTML PAGE*/
<div id="slideshow">
<p id="text1"><img src="/url/of/your/image1"/></p>
<p id="text2"><img src="/url/of/your/image1"/></p>
<p id="text3"><img src="/url/of/your/image1"/></p>
<p id="text4"><img src="/url/of/your/image1"/></p>
</div>
CSS:
#text1, #text2, #text3, #text4 {
position:absolute;
height:402px; // you can put other value...here
width:850px; // you can put other value...here
}
Javascript function
function changeimg(){
var sec = 6000; // Change each 6 secondes
var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID
// For each element "<p>"
paras.each(function(para){
if(para.visible()){
paraFade = para; // We stock the item which will disappear
paraAppear = para.next(); // We got the next element (The one who wants to appear)
//If it's the last "p" element we come back to the first one
if(paraAppear == undefined){
paraAppear = paras[0];
}
}
});
Effect.Appear(paraAppear); // Script Aculo US animation
Effect.Fade(paraFade); // Script Aculo US animation
timer = setTimeout("changeimg()",sec); // Timer
}
Event.observe(window, 'load', function() { changeimg(); }
Hope that can help you.
They are using mootools framework. Check this out:
http://mootools.net/forge/p/slideshow
The jquery cycle plugin is a simple script to do this effect.
I think you can have the same effect if you use a jquery plugin called "jquery innerfade"
Here is a website when you can get the .js file of it, of course you need jquery to use it
Inner Fade
Related
I'm using code from this angular.js modal window tutorial by Jason Watmore: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
I'm trying to implement an angular.js modal window within a php partial. Here is the code where I believe there's a problem:
<div id="screenings">
<?php
//MySQL database connection established
...
while ($row = mysqli_fetch_array($result)){
echo "<div class='img_div'>";
echo "<img class='modal_img img_screenings' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";
...
echo "</div>";
}
?>
</div>
<modal id="custom-modal-1">
<div class="modal">
<div class="modal-body">
<img id="popup_img" src="#">
</div>
</div>
<div class="modal-background"></div>
</modal>
<script>
$('.img_div').on("click", function() {
var source = ( $('.modal_img').attr("src") );
alert(source);
$('#popup_img').prop('src', this.src);
});
</script>
The First Problem
The while loop spits out a bunch of images. The script at the bottom should then grab the src of whichever image is clicked and then alert that src in a pop-up message. However, it only alerts the src of the first image in the while loop regardless of which image of the bunch is clicked. I've tested this script outside of the while loop on separate img elements with different src attributes, and it works fine outside of the echoed while loop.
The Second Problem
Within the while loop, there is an ng-click in the second echoed statement that just isn't working. In my app.js file, here is the controller code that ng-click=\"vm.openModal('custom-modal-1')\" should go to (the slashes are because of the echo statement):
app.controller('screeningsController', ['$scope', '$log', "ModalService", function($scope, $log, ModalService){
var vm = this;
vm.message = "Hello World!";
$log.log(vm.message);
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
};
}]);
Right after the var vm = this; statement, I'm trying to output a message to the browser console as a test, but it's not working. Maybe my syntax is wrong?
here's a couple quick thoughts. In the first portion, I don't think you were actually capturing the correct click. I added a variable to pass into the on click function to select the one that was actually clicked.
As far as the php, sometimes its easier to toggle out of php and do a chunk of html. If you're passing a lot of html chunks you might want to consider doing output buffering.
<?php
while ($row = mysqli_fetch_array($result)){ ?>
<div class='img_div'>";
<img class="modal_img img_screenings" ng-click="vm.openModal('custom-modal-1')" src="images/<?php echo $row["image"]; ?>" />
</div>
As far as the jquery on the page:
you need to grab the actual node with the click event - the "e" is a common convention for that, but its really just a variable
$('.img_div').on("click", function(e) {
var source = $(e).attr("src"); // here you grab the actual attribute
alert(source);
$('#popup_img').attr('src', source);
});
i'm assuming you actually want to set the img src attribute in your target modal here.
Okay so I have this portfolio page where I display a couple of thumbnails, and you can order it by tags, so for example like this:
year 1
And this works fine. However, my thumbnails display at three on a row, so only the first two should have a right margin, the third one no margin.
I used PHP to do this which works fine.
if ($result=$link->query($query)) {
for ($i=1; $i <= $result->num_rows; $i++) {
$row= $result->fetch_assoc();
$id = $row['number'];
$title = $row['title'];
$bgthumbnail = $row['thumbnail'];
if($i%3 == 0){
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview noMargin\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
} else {
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
}
}
$result->close();
}
However, when I click a tag, the margin doesn't update. So when a thumbnail was given no margin in the overview because it was the third one in row, when it displays first because of a chosen tag, it also receives no margin.
Of course this is because nothing "refreshes" or something, but I was wondering if there is an "easy" way to fix this problem? To make the PHP loop run again or something?
You must to set/remove noMargin class name via javascript:
$('.year-clicker').click(function (event) {
event.preventDefault();
var year = $(event.currentTarget).data('year');
$('.thumb').hide().removeClass('noMargin').filter('.year' + year).show();
$('.thumb:visible').each(function (i, e) {
if ((i + 1) % 3 == 0) {
$(e).addClass('noMargin');
}
});
return false;
});
Try out this jsfiddle http://jsfiddle.net/xgE3K/1/
unless your "tags" are recalling the page - so that the php is re-executed - you probably want to look at javascript (or possibly ajax) to do the reformatting of the layout.
Depending on the quantity of thumbnails and the variety of tags, you might use the php to create a div (with a relevant id and a style="" attribute) for each of the different filter tags - containing the layout of the thumbnails for that tag (so you can ensure your layout is fine for each view).
i.e. repeat your code above enclosed by a unique div tag for each view.
Make the default view div visible (style="display: block") and the others hidden (style="dsplay: none").
Then have a javascript function that is executed on any tag click. This will make the relevant div visible and the rest hidden, by changing their style value as above.
Uses a bit more memory, but your switching between views will be quicker than doing a reload.
Despite all this, I think it's cleaner and more scalable to recall the page with the relative filter (depending on the tag) then you will have more control over the layout.
My site parses a spanish dictionary and lets you search for more than one word at a time. If you look up "hola" you get the first div). Some words come up with suggestions, like "casa", instead of definitions like "hola":
And what i am looking for is this:
So, i would like to: when you click on the suggestions (like CASAR in the example I posted) to print the result in a div like HOLA. Here is the code used:
$words = array('word0','word-1');
function url_decode($string){
return urldecode(utf8_decode($string));
}
$baseUrl = 'http://lema.rae.es/drae/srv/search?val=';
$cssReplace = <<<EOT
<style type="text/css">
// I changed the style
</style>
</head>
EOT;
$resultIndex = 0;
foreach($words as $word) {
if(!isset($_REQUEST[$word]))
continue;
$contents = file_get_contents($baseUrl . urldecode(utf8_decode($_REQUEST[$word])));
$contents = str_replace('</head>', $cssReplace, $contents);
$contents = preg_replace('/(search?[\d\w]+)/','http://lema.rae.es/drae/srv/search', $contents);
echo "<div style='
//style
", (++$resultIndex) ,"'>", $contents,
"</div>";
}
I have tried with: $contents .= '' . $word . '<br/>'; But it didn't work nor I know really where/how to use it.
Okay, I'll use jQuery for the example because it will be the easiest to get the job done specially if you are new to programming.
NOTE: I DO NOT RECOMMEND USING JQUERY -BEFORE- LEARNING JAVASCRIPT -- DO IT AT YOUR OWN RISK, BUT AT LEAST COME BACK AND LEARN JAVASCRIPT LATER
First, read up on how to download and install jquery here.
Secondly, you will want something a little like this, let's pretend this is your markup.
<div id="wrapper">
<!-- This output div will contain the output of whatever the MAIN
word being displayed is, this is where HOLA would be from your first example -->
<div id="output">
</div>
<!-- This is your suggestions box, assuming all anchor tags in here will result in
a new word being displayed in output -->
<div id="suggestions">
</div>
</div>
<!-- Le javascript -->
<script>
// Standard jQuery stuff, read about it on the jquery documentation
$(function() {
// The below line is a selector, it will select any anchor tag inside the div with 'suggestions' as identifier
$('#suggestions a').click(function(e) {
// First, stop the link going anywhere
e.preventDefault();
// Secondly, we want to replace the content from output with new content, we will use AJAX here
// which you should also read about, basically we set a php page, and send a request to it
// and display the result without refreshing your page
$.ajax({
url: 'phppage.php',
data: { word: 'casar' },
success: function(output) {
// This code here will replace the contents of the output div with the output we brought back from your php page
$('#output').html(output);
}
})
});
})
</script>
Hopefully the comments will shed some light, you need to then set up your php script which will be sent a GET request. (for example, http://some.address.com/phppage.php/?word=casar)
Then you just echo out the output from PHP
<?php
$word = $_GET['word'];
// Connect to some database, get the definitions, and store the results
$result = someDatabaseFunctionThatDoesSomething($word);
echo $result;
?>
Hope this helps, I expect you have a lot of reading to do!
An ex developer of ours when working on one of our first versions of our internal PHP framework integrated the dropdown element of main navigation using javascript and I need to get a fix applied for IE8 which is causing the dropdown to appear offset even though using CSS displays fine in Firefox / Chrome.
The site in question is http://www.benchmemorials.co.uk/
In the event there is sub menu items from the main navigation that use a dropdown, javascript is called to display this I believe (below)...
<script type="text/javascript">
$(document).ready(function() {
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
$('#link_why-buy-from-us').mouseover(function() {
$('.dropdown').show();
});
$('.dropdown').mouseover(function() {
$('.dropdown').show();
});
$('.dropdownstyle').mouseover(function() {
$('.dropdown').show();
});
$('#link_why-buy-from-us').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdown').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdownstyle').mouseleave(function() {
$('.dropdown').hide();
});
});
</script>
I'm not too hot on javascript but from what I gather, I presume the above is instructing the drop down to appear below the 'Why Buy from Us' top navigation menu item. As I mention, this is working as expected in Firefox/Chrome.
However, the issue appears to be the fact that somewhere along the line, inline CSS is being generated dynamically for the dropdown class - this is dynamically generating
style="top: 61px; left: 964px; display: none;"
Every file on the server has been searched and nowhere is this specified, my only guess is that the javascript above is somehow creating this line of CSS which is therefore preventing me from altering the position of the dropdown in the IE only stylesheet to fix the display in IE8.
The rest of the code for the dropdown menu from the php file is below:-
<div class="dropdown"><div class="dropdownstyle">
<?php
mysql_select_db($database_config, $config);
$query_sub_pages = "SELECT * FROM `pages` WHERE site_id = '".$current_site_id."' AND menu_location = 'sub' ORDER BY `order` ASC";
$sub_pages = mysql_query($query_sub_pages, $config) or die(mysql_error());
$row_sub_pages = mysql_fetch_assoc($sub_pages);
$totalRows_sub_pages = mysql_num_rows($sub_pages);
$current_sub_link = 0;
do {
$current_sub_link = $current_sub_link + 1;
?>
<p<?php if ($current_sub_link != $totalRows_sub_pages) {echo ' style="margin-bottom: 10px;"';}; ?>><a class="sub_link" href="<?php echo $site_base.$row_sub_pages['page_location']; ?>"><?php echo $row_sub_pages['page_display_name']; ?></a></p><?php //if ($current_sub_link != $totalRows_sub_pages) {echo '<br />';}; ?>
<?php } while ($row_sub_pages = mysql_fetch_assoc($sub_pages)); ?>
</div>
</div>
As you can see, there is no inline CSS applied to .dropdown. All CSS from the sylesheets can be viewed if you inspect element in browser.
Please could anyone advise how or if it is possible to prevent this dynamic CSS positioning from being generated or an alternative / easier method of ensuring the dropdown appears consistently across all browsers including IE?
Thanks in advance.
The positioning is done by this code:
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
It takes the position of #link_why-buy-from-us relative to the document, and adds it to the .dropdown element.
I don't know if you're familiar with jQuery, but the code above is written using that JavaScript library. For more documentation about .offset(), look here: http://api.jquery.com/offset/
I'm working on a responsive website. I'm using CSS Media Queries and Adaptive Images (http://adaptive-images.com/) to render each page correctly on different devices.
My problem is that some elements are downloaded by the browser even if there are hidden! For instance, a element with the property {display:none;} is downloaded despite the fact that I don't want it.
So, here is my question: is there a way to add or remove HTML code depending on the device's screen-size?
By reading the code of "Adaptive Images" script, I saw they used a cookie, which stores the screen-size value.
<script>
document.cookie='resolution='+(window.innerWidth)+'; path=/';
window.addEventListener("resize", function() {
document.cookie='resolution='+(window.innerWidth)+'; path=/';
}, false);
</script>
So, I tried to read this cookie with a PHP function:
<?php
$fallback_res = 481;
$res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] :
$fallback_resolution; // Get the viewport resolution in $res variable
?>
It allows me to write a very useful PHP condition :
<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px
{
echo '<video>...</video>'; // Display the video
}
else { //if the screen is smaller
echo ''; // Echo something else
}
?>
It work very well. If the viewport is < 481px, the video is not downloaded. If the viewport is > 481px, the video is downloaded. But it only works, on page load! If I load the page with a 480-wide-opened-browser (=video not loaded), and then resize my browser to higher resolution, there is a big hole in the middle of the page.
What I need is to reload some part of the code on window resize. (Each time I resize the browser window, I want the $res condition to be updated automatically, and the following code as well)
Thanks.
if you combine blow jquery code with ajax , maybe you can do that .
$(window).resize(function() {
if($(window).width() > 480 )
{
#ajax code for download video
#or use .after in jquery
}
})
Html will looks like
<div id="phone">Content For the below 450px </div>
<div id="desktop">Content For the above 450px </div>
Add jQuery
if($(window).width() < 450 )
{
$('#desktop').remove();
}
else
{
$('#phone').remove();
}