I'm very new to PHP, so customizing ready-made scripts is no forte of mine quite yet.
I have an animated popup modal script, which currently triggers when a certain is clicked. I'd also like to trigger this same script automatically when a particular div exists on the page.
The #mask, as you can see from the code, is a translucent layer of black over the page.
Here's the script that I need to adjust:
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
});
Currently it opens automatically when this link is clicked:
<a href="#" name="modal">
And I'm trying to get it to run automatically when this DIV exists on the page:
<div name="showintrovideo"></div>
Thanks so much guys, you're always such great help!
- - Andrew
EDIT
Here's the full code I'm working with:
HTML
<div id="boxes">
<div id="qrcodemarketing" class="window">
<!-- close button is defined as close class -->
<div style="float:right;">
<img src="images/close_window.png" width="22"height="22" alt="Close Window" />
</div>
<iframe width="640" height="480" src="http://www.youtube.com/embed/MYVIDEO" frameborder="0" allowfullscreen></iframe><br /><b>Pause the video before closing this window</b>
</div>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
CSS
#mask {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
background:none;
display:none;
z-index:9999;
padding:20px;
color:#fff;
}
.js file
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
It it possible to just tweak the .js file so that it can also open automatically as well as by click?
Thanks!
You're probably best using a session or cookie to determine whether to show the intro video. I'd also wrap your popup in a method you can call on a jQuery element. Something like:
$('a').myPopupMethod();
That way, you can also call it programmatically:
$.myPopupMethod();
In your HTML page, you can then use PHP to determine whether to show your popup or not:
<?php
session_start();
$video_watched = $_SESSION['video_watched'];
?>
<!DOCTYPE html>
<html>
<body>
<script src="jquery.js"></script>
<?php if ($video_watched != true): ?>
<script>
$(document).ready(function() {
$.myPopupMethod();
});
</script>
<?php endif; ?>
</body>
</html>
Related
When I reload the div content that time scrollbar is coming on top, I want when div reload that time scrollbar position same where I left.
<style type="text/css">
div.scrollbar {
height: 655px;
overflow: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
function newPost() {
$("#newpost").empty().load("slide/parts/extruderRight1.php");
}
var res = setInterval(newPost, 30000);
});
</script>
// How to Add scroll bar maintain where I left load("slide/parts/extruderRight1.php")
<div class="voice {}"class="voice {}"><span class="label"><b>To Do List</b></a></span></div>
<div id="scrollbar" class="scrollbar">
<div id="newpost">
</div>
</div>
What I have to do so I can run proper or add anything into the my code i wanted to resume it to the previous scrolled position suggest me or any changes required I am stuck on this step
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
<div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
<p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
</div>
<script>
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
</script>
Well, there are various ways to achieve this.
You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.
Let me be more explicit, according to your case
<?php
class Friend
{
public $Friend_id;
public $Friend_details;
public $Friend_image;
public function __construct($id, $details, $image){
$this->Friend_id = $id;
$this->Friend_details = $details;
$this->Friend_image = $image;
}
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
<h5>User details</h5>
<?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
display: none;
background-color: lightgray;
width: 250px;
padding: 15px;
}
</style>
<script>
var userImages = document.getElementsByClassName('user_image');
for(var i = 0; i < userImages.length; i++){
var
userImage = userImages[i],
userId = userImage.id.replace('user_image_', ''),
thisUserDetails = document.getElementById('user_details_' + userId),
mouseOutTimeout = 100, // Here is the trick
mouseTimer = null; // Needed in order to hide the details after that little timeout
userImage.addEventListener('mouseout', function(){
mouseTimer = setTimeout(function(){
thisUserDetails.style.display = 'none';
}, mouseOutTimeout);
});
userImage.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
thisUserDetails.style.display = 'block';
});
thisUserDetails.addEventListener('mouseout', function(){
var _this = this;
mouseTimer = setTimeout(function(){
_this.style.display = 'none';
}, mouseOutTimeout);
});
thisUserDetails.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
});
}
</script>
Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.
Hope it help.
I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.
here is my code, i'm not posting the css here
HTML :
<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>
</div>
JQUERY :
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked
var rating = $(this).data('rating');
alert(rating);
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element
});
Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.
So instead of this
$(this).addClass('selected');
you use this, similar to how you have previously.
$(this).prevAll().andSelf().addClass('selected');
But I would also remove the hover class so that it's obvious to the user on click
$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');
Demo
<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html>
<head>
<title>Rating System jQuery Plug by Aldanis Vigo</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style type='text/css' language='css'>
.record{
opacity: .50;
}
#value-display{
position: relative;
top: -5px;
margin-left: 10px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<span value='0' id='ratingbar'>
<img class='record' number='1'/>
<img class='record' number='2'/>
<img class='record' number='3'/>
<img class='record' number='4'/>
<img class='record' number='5'/>
<span id='value-display'>0 / 5</span>
</span>
</body>
<script>
//Change these variables to your liking!!
var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
var iconwidth = '20px';
var iconheight = '20px';
var value = $('#ratingbar').attr('value');
$('#ratingbar img').each(function(){
//Set the icon for each
$(this).attr('src', iconsrc);
$(this).attr('width', iconwidth);
$(this).attr('height', iconheight);
$(this).hover( function(){
$(this).css('opacity','1');
$(this).prevAll().css('opacity','1');
});
$(this).click( function(){
//Clear all of them
$(this).parent().attr('value',$(this).attr('number'));
$(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}else{
$(this).css('opacity','.50');
}
});
});
$(this).mouseout( function(){
$(this).css('opacity','.50');
$(this).prevAll().css('opacity','.50');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}
});
});
});
</script>
</html>
<script type="text/javascript">
function Start(){
Shadowbox.init({skipSetup: true});
Shadowbox.open({
content: '/luckycement/flashxml/LuckyCement.swf',
player: 'swf',
title: "",
width: 800,
height: 600
})
}
//window.onload=Start;
</script>
<script src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/SpryAssets/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/luckycement/plugins/content/arisexylightboxlite/js/jquery.min.js"></script>
<script type="text/javascript" src="/luckycement/plugins/content/arisexylightboxlite/js/jquery.noconflict.js"></script>
<script type="text/javascript" src="/luckycement/plugins/content/arisexylightboxlite/js/jquery.easing.js"></script>
<script type="text/javascript" src="/luckycement/plugins/content/arisexylightboxlite/js/jquery.sexylightbox.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ SexyLightbox.initialize({"dir":"\/luckycement\/plugins\/content\/arisexylightboxlite\/js\/sexyimages"}); });
</script>
<!--script type="text/javascript" src="js/jquery-1.3.1.min.js"></script-->
<script type="text/javascript">
$(document).ready(function() {
//alert('nida');
//Execute the slideShow
slideShow();
slideshowimg();
$("#accordion").accordion();
//alert($("#tabarea_r").attr('id'));
});
function slideShow() {
//alert($('#gallery').attr('id'));
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',5000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
can anyone help me in sorting the issue? I'm using shadowbox.js for showing gallery images in shadowbox but it conflicts with my gallery. I'm using the function start() that call on index page load and run the flash file in shadowbox. But for displaying images it doesnot show shadowbox conflicts my javascript files.
They are conflicting because you are using two different jQuery versions. Use the latest jQuery Version only for both sexylightbox and shadowbox.
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.