I'm having a div layer which should be moved to the right or left and when its moved far enough I want it to run a php statement ( Div 500px to right activates $state = 1;)
This is what I got so far:
<script>
$(document).ready(function () {
$('.swipe').draggable({
axis :'x', revert:true, revertDuration:'250',
});
});
</script>
This is my Div:
<div id="middleLayerShadow" class="swipe">... some stuff (pics and so on)...</div>
and the head part of the website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="javascript/jquery-ui-1.12.1/jquery-ui.js"></script>
<link href="javascript/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">
I want the div to go back like I programmed it with (revert:true) and when its dragged and drop at a far enough distance to left or to right i want it to disappear and somehow let a variable in php register it :)
Imagine it like a Tinder rating field where you swipe left and right!
Please help ! :)
Related
I want to display the products via shortcode IE: [product_category category="test" per_page="12"] In a carousel.
I have Flexslider setup, What I have tried is adding this to loop-start.php
<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
selector : ".products > li",
animation : "slide",
controlsContainer : ".flex-container"
});
});
</script>
<div class="flexslider">
<ul class="products">
and closing the div after ul on loop-end.php
Though I'm not having any luck with it at all :/ It works on a test html file just fine.
The reason I want it like this and not just use some plugin is I have overlay popup that wont work with any Carousel plugin Ive tried and I also want to display multiple categories this way.
Thanks for any help
Initially I thought your markup didn't match, but then I saw that you've modified the loop. Though I think the jQuery selector ul.products would work. Because it should be container and its direct children as slides.
I would advise you to look in your browsers developer console to see what kind of script errors you are getting. But I suspect you are seeing something along the lines of function not defined since you aren't using no conflict wrappers. You have no idea how much this frustrated me in the beginning.
Your script should therefore look something like (though I think you should add it to the footer:
function so_28486348_print_footer(){ ?>
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
$('ul.products').flexslider({
selector : "li.product",
animation : "slide",
controlsContainer : ".flex-container"
});
});
</script>
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer
I would also advise loading all your scripts (at least the external scripts) via wp_enqueue_script (see the codex link above)
function my_scripts_method() {
wp_enqueue_script(
'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
My problem:
I can display content of a php file including(image background) using iframe. When I go to include my php file using
include("modules/form.php");
or
file_get_contents("modules/form.php");
it displays content, but background image becomes invisible. It is a big site. So, is there any alternate of iframe for this purpose? I do not want to use iframe because my ranking in google is becoming down.
You can't archive this using php , till far i know. PHP is a server side script it does not know anything from the client side. You can use jquery , first you will have to create a div and in it set the content of the page.Use the code below
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script type='text/javascript'>
$(document).ready(function (){
$('#divId').load(full url to modules/form.php); // Paste the full url here
});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
Hope this helps you
I'm looking to make a webpage that will show a random web site (within the current web page) and only show it for 15 seconds then show another page, etc. I would like the web page to get the list of web sites to show from a MySQL database.
I'm not sure if this is possible to do in PHP because I know you can use iframes in Javascript, but if it's possible I'd like to do it in PHP. If anyone could point me in the right direction or write a little bit of code it would be greatly appreciated.
Add this to your HTML head:
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
Then, you can serve that page with a different iframe every time.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Random website</title>
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
</head>
<body>
<iframe src="<?php echo $website_pulled_from_database; ?>"></iframe>
</body>
</html>
You can use the sleep function in PHP instead of using jS if u are so adament on using pure PHP. But I see no point in doing that.
http://php.net/manual/en/function.sleep.php
You should also look into ajax in PHP.
You can use header() in PHP
header('refresh:15;url=http://www.google.com/');
The code above will redirect the user to Google after 15 seconds
Well, I dont think u need to do this in pure PHP. You can retrieve the contents from the DB and display them at whatever time you want using javascript. You can use the setInterval function for javascript(jQuery).
for. eg:
<script type="text/javascript">
$(function(){
var i=0;
$('li').not(':first').hide();//Hide everything other than the first li item
setInterval(function(){
$('li').eq(i).hide();//Hide the current li item
i++;
if($('li').eq(i).text().length==0) //check if it is the last li item
{
i=0;
}
$('li').eq(i).fadeIn(1000); //FadeIn the next li item
},3000);
});
</script>
Hope this was of some help for you.
I would like to apologize at first instant for asking some stupid question(well not the case for me), but i cannot help it out. i must admit i do not know jQuery but i do have the basic understanding of Javascript and i am a dedicated PHP developer. i don't have any problem understanding the HTML or css. when it comes to jquery i lag it and i dont have enough time to learn it because of the deadline i have to meet.
to start with i developed an application using php and purchased a template from themeforest, now it has some nice and beautiful javascript code the problem is i do not know how to make it work. even though it lies right infront of me. here is my code in the login page. where i want to use this jquery
<link rel="stylesheet" type="text/css" href="css/basicblack.css" title="styles5" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/supersleight.js"></script>
<script type="text/javascript" src="js/jquery.example.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
and now i want to use the fadein effects for the class msg-error and msg-warning in my code, it is not working, here is the combined code with PHP logic which i have used.
although with this i am able to get the desired result like it will show the error if the field is empty or invlalid username and password. but i am unable to use that fadein effect. how do i do that?
<div id="wrap">
<?php if(isset($_POST['login'])) { if( empty($_POST['username']) || empty($_POST['password'])) { ?>
<div class="msg-error">
<img src="images/icons/22/messagebox_warning.png" alt=""/>
<p>Please fill in all of the fields!</p>
</div>
<?php } }?>
<?php
if( isset($_POST['login'])) {
if( !empty($_POST['username']) || $_POST['password']) {
if( !check_login($_POST['username'], $_POST['password'])) {
?>
<div class="msg-error">
<img src="images/icons/22/remove.png" alt=""/>
<p>Wrong username or password!</p>
</div>
<?php } } } ?>
As grossvogel suggests, it is likely that the elements are not hidden to begin with. Bear in mind that if you hide them with CSS, they will be less accessible to users without JavaScript. You could do something like this instead:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
This type of approach is known as progressive enhancement.
My guess is that these items are not fading-in because they're visible to start with. Use simple CSS (display:none) to hide them, then the jquery fadeIn calls should display them once the page is loaded.
update
As others have pointed out, it's probably better to hide the messages with js instead of css, to allow users withough javascript to see the messages.
I'm just guessing here, but the problem might be that, given what I can see here, your "msg-error" divs are already displayed, so they can't be faded in. Try modifying your jQuery like so:
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
You can change these three calls:
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
To just this:
$(".block, .msg-error, .msg-warning").hide().fadeIn(1000);
This uses the multiple selector to get all 3 at once, and does a .hide() to hide them just before fading them in. The benefit of this is that if a user has JS disabled, they'll still get the errors, just without a fade.
I'm doing a project in codeginiter these days, i want to print just the text area when the print button is clicked? can you guys help me to achieve this?
regards.
Rangana
codeigniter is an excellent framework, but unfortunately doesn't quite apply in this case because php is a server side scripting language and printing is done clientside. For printing a given area you'll want to use some javascript, specifying the div you want to print out. I would recommend the jQuery library as it has a print plugin I've used in a few of my projects. So you would use php to define code like this
<div id="content"> ... </div>
<div id="print_button">Print</div>
<script type="text/javascript">
// javascript goes here, if you were using jQuery
// with the PrintArea pluginyou might do...
$("div#print_button").click(function(){
$("div#content").printArea([options]);
});
</script>
Which would then execute client side when the print button is pressed.
Check out jquery here http://jquery.com/
There's also the vanilla window.print() function with setting up a print stylesheet if you don't want to use jQuery.
If you want to define certain elements to be printed only you need to create a separate css stylesheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Every element which should not be printed can be hidden using display: none;. See this page for more infomation.