Hello im trying to make a button move in php and looking for tips from j query guys to just in case its easier to do in j query. I have worked out if i put left right and center ( the words ) in a array then pick one at random and print it out in side a div tag then put a button in the div tag the div should be arranged some times right , left , center which would make the button move ? here is my code
<?php
$Keywordarray = new array(3);
$Keywordarray[0] = "left";
$Keywordarray[1] = "right";
$Keywordarray[2] = "center";
$rand_key = array_rand($Keywordarray);
?>
<div align="<?php echo $rand_key ; ?>">
<button type="button">Click Me!</button>
</div>
But im getting a white page ?? I wanna try and move the button to stop macroing but only left right and center
I also have tryied this
<?php
$numbers = range(left, right , center);
shuffle($numbers);
foreach ($numbers as $number) {
}
?>
<div align="<?php echo $number ; ?>">
<button type="button">Click Me!</button>
</div>
Which the page appears but button does not move ?
Found some java script that works now
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var flag = 1;
function t() {
if(flag == 1) {
Y.style.top = "75px";
Y.style.left = "700px";
}
if(flag == 2) {
Y.style.top = "115px";
Y.style.left = "100px";
}
if(flag == 3) {
Y.style.top = "300px";
Y.style.left = "350px";
}
flag = flag + 1;
if(flag == 4) {
flag = 1;
}
}
function al() {
alert("Correct!");
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
</center>
</DIV>
<DIV ID="Y" STYLE="position:absolute; left:300px; top:300px; width:50px;
height:50px;">
<form>
<input type=button value="YES" onClick="t()">
</form>
</DIV>
try:
$rand_key = $Keywordarray[array_rand($Keywordarray)];
You shoud first check the manual :)
http://php.net/manual/en/function.array-rand.php
array-rand returns the key.
Related
I am making a one page website and would like to show or hide a button dependent on the section id or element that is visible in the view port.
I have a home button that i need to show when the user scrolls down past what is technically the homepage. I am using scrollify to snap scrolls to section with a height value of 100vh.
I have a function to detect if the element in question is in view but the button displays or hides relevant to the page that is loaded not by seaching for the element that would tell the button to show or hide.
I am using the div class text to determine whether to show or hide the home button is there a way to make jquery update and re engage the function when the user has scrolled or moved the page? the pages in question are live on www.testsiteclash.co.uk
Thanks
jquery
$.fn.inView = function(inViewType){
var viewport = {};
viewport.top = $(window).scrollTop();
viewport.bottom = viewport.top + $(window).height();
var bounds = {};
bounds.top = this.offset().top;
bounds.bottom = bounds.top + this.outerHeight();
switch(inViewType){
case 'bottomOnly':
return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
case 'topOnly':
return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
case 'both':
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
default:
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
}
};
$(document).ready(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Html/php
<?php get_header(); ?>
<article id="section_1">
<section class='section' data-section-name="Devon Food Movement">
<div class="container">
<div class="logo">
<div class="logo-image">
</div>
</div>
<div class="text">
<h1>Devon Food Movement</h1>
<h2>Website under construction <br class="textbreak">follow us below on ...</h2>
</div>
<div class="icons">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon3m"></div>
</div>
</div>
</section>
</article>
<article id="section_2">
<section class='section' data-section-name="Contact">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
get_template_part('form');
endwhile;
else:
echo '<p>No Content found</p>';
endif;
?>
</section>
</article>
<div class="home-btn"><i class="fas fa-home"></i></div>
</body>
</html>
Added scroll to the function all works now, noob alert haha!
$(document).scroll(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Here is a simplistic example that shows how to use the window.scroll event to detect whether to show/hide a button.
var currPos=1, lastPos=0, scrollDir='dn';
var triggerPos = $('#myTrigger').offset().top;
$(window).scroll(function(){
currPos = $(window).scrollTop();
$('#d2').html(currPos); //unnecc - displays current scroll position for you
scrollDir = (currPos > lastPos) ? 'dn' : 'up';
lastPos = currPos;
if (scrollDir=='dn'){
if (currPos > triggerPos) $('#btnSpecial').fadeIn(100);
}else{
if (currPos < triggerPos) $('#btnSpecial').fadeOut(100);
}
});
.dPage{width:100vw;height:100vh;}
#d1{background:palegreen;}
#d2{background:bisque;}
#d3{background:lightpink;}
#d4{background:purple;}
#d5{background:lightblue;}
#btnSpecial{display:none;position:fixed;top:30px;right:100px;padding:10px;background:dodgerblue;color:white;font-size:2.3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dPage" id="d1"></div>
<div class="dPage" id="d2"><div id="myTrigger"></div></div>
<div class="dPage" id="d3"></div>
<div class="dPage" id="d4"></div>
<div class="dPage" id="d5"></div>
<button id="btnSpecial">La Button</button>
I've created some kind of loop with PHP and want to be able to display the number of divs based on the number of buttons pressed.
<?php for ($x = 1; $x <= 6; $x++) { ?>
<button type="button">
<span><?php echo $x; ?></span>
</button>
<?php } ?>
This outputs 6 buttons, then I want to output div:
<?php for ($x = 1; $x <= 6; $x++) { ?>
<div class="some_div"><?php echo $x; ?></div>
<?php } ?>
Thanks!
Its simple in jquery.
Steps to follow :
1) First you downnlaod jquery latest version library file
2) Include the file in head tag on the top
3) Next copy and paste the below code
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
jquery
$(function() {
$('.some_div').on('click', function() {
console.log($(this).text()); // get the number you clicked
$('.some_div').show();
$(this).hide();
});
});
You won't be able to do this purely with PHP, as you're intending. PHP executes on the server, so by the time the user is clicking buttons, PHP is done executing.
You'll need to use JavaScript for this (or jQuery, as you have the question tagged).
To do this in jQuery, you can do something like this:
<?php for ($x = 1; $x <= 6; $x++): ?>
<button type="button">
<span><?= $x ?></span>
</button>
<?php endfor; ?>
<div id="container">
</div>
<script type="text/javascript">
$('button').click(function() {
var selected = !$(this).data('selected');
$(this).data('selected', selected);
if (selected) {
$('#container').append('<div class="some_div"></div>');
} else {
$('#container').find('.some_div').last().remove();
}
});
</script>
Or, if your buttons are tied directly to a specific div:
<?php for ($x = 1; $x <= 6; $x++): ?>
<button type="button" data-index="<?= $x ?>">
<span><?= $x ?></span>
</button>
<?php endfor; ?>
<?php for ($x = 1; $x <= 6; $x++): ?>
<div class="some_div" id="someDiv<?= $x ?>"></div>
<?php endfor; ?>
<script type="text/javascript">
$('button').click(function() {
var selected = !$(this).data('selected');
$(this).data('selected', selected);
var index = $(this).data('index');
$('#someDiv' + index).toggle(selected);
});
</script>
I have a MySQL database of a bible that I query via php. Right now i'm in the testing phase. Below is my test file where I display a specific Chapter of a Book in a modal. The problem is that I have no idea how to essentially 'display the next chapter (or previous chapter)' when a user clicks the left or right arrow buttons on the footer of the modal.
Currently the test file shows "Genesis 12". How can I allow the user to see Genesis 13 (inside the same modal) when the user clicks the right arrow button (at the bottom)?
<!DOCTYPE html>
<html>
<head>
<?php require "config.php"; ?>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'/>
<script>
$(document).ready(function() {
$('.btn').click(function() {
$("#myModal").modal('show');
});
});
</script>
<style>
p, span, div { font-family:"Helvetica Neue",Verdana,Helvetica,Arial,sans-serif;font-size:1.3rem;line-height:1.8;}
.selverse { border-bottom:1px dotted blue;}
</style>
</head>
<body>
<button type='button' class='btn btn-success'>Click</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<?php
$book = "Genesis";
$chapter = "12";
$verse = "5";
$v_under = "<span style='text-decoration:underline;'>";
$v_end = "</span>";
echo "<h4 class='modal-title'>".$book." ".$chapter."</h4>";
echo "</div><div class='modal-body'>";
$result = $db->prepare("SELECT * FROM `asv` WHERE Book = :book AND Chapter = :chapter");
$result->BindParam(':book',$book);
$result->BindParam(':chapter',$chapter);
$result->execute();
$y = 0;
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
$bookx = $row['Book'];
$chapterx = $row['Chapter'];
$versex = $row['Verse'];
$versetext=$row["VerseText"];
if ($versex == $verse) {
echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span class='selverse' id='v".$versex."'>".$versetext."</span>";
} else {
echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span id='v".$versex."'>".$versetext."</span>";
}
}
?>
</div>
<div class="modal-footer" style='text-align:center;'>
<a href='javascript:;'><i style='float:left;margin-left:1em;' class='fa fa-angle-left fa-2x'></i></a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<a href='javascript:;'><i style='float:right;margin-right:1em;' class='fa fa-angle-right fa-2x'></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
.. Any help will be greatly appreciated!!
You should look into AJAX to do something like that properly, what AJAX basically does is load content after the page has finished loading. So you can get rows out of your database without reloading the page. A very basic approach would be:
Change the href of the arrows to call the JavaScript function loadNew();
<div class="modal-footer" style='text-align:center;'>
<a href='javascript:loadNew('previous');'><i style='float:left;margin-left:1em;' class='fa fa-angle-left fa-2x'></i></a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<a href='javascript:loadNew('next');'><i style='float:right;margin-right:1em;' class='fa fa-angle-right fa-2x'></i></a>
</div>
Add the loadNew function to your script tag:
<script>
$(document).ready(function() {
$('.btn').click(function() {
$("#myModal").modal('show');
});
});
function loadNew(type){
//We pass the type (previous or next row) and the current ID of the row as GET variables to the fetch.php script
$.get("http://yoursiteurl.com/fetch.php?type="+type, function(data){
$(".modal-header").html(data);
});
}
</script>
Now all that's left is to create the PHP file (fetch.php), that would be something like:
<?php
session_start();
if(!isset($_SESSION['book'])){
$_SESSION['book'] = "Genesis";
$_SESSION['chapter'] = 12;
$_SESSION['verse'] = 5;
}
if($_GET['type'] == 'next'){
//Select the next verse, you are probably going to want to add a check to see if the chapter is available, if not go to the first chapter or something like that
$_SESSION['chapter'] = $_SESSION['chapter'] + 1;
} else{
$_SESSION['chapter'] = $_SESSION['chapter'] - 1;
}
$book = $_SESSION['book'];
$chapter = $_SESSION['chapter'];
$verse = $_SESSION['verse'];
$v_under = "<span style='text-decoration:underline;'>";
$v_end = "</span>";
echo "<h4 class='modal-title'>".$book." ".$chapter."</h4>";
echo "</div><div class='modal-body'>";
$result = $db->prepare("SELECT * FROM `asv` WHERE Book = :book AND Chapter = :chapter");
$result->BindParam(':book',$book);
$result->BindParam(':chapter',$chapter);
$result->execute();
$y = 0;
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
$bookx = $row['Book'];
$chapterx = $row['Chapter'];
$versex = $row['Verse'];
$versetext=$row["VerseText"];
if ($versex == $verse) {
echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span class='selverse' id='v".$versex."'>".$versetext."</span>";
} else {
echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span id='v".$versex."'>".$versetext."</span>";
}
}
?>
Then save the file and edit the path http://yoursiteurl.com/fetch.php to the correct one.
I have created a while loop that selects random images from from my server and posts it. Now I want to add some jquery code and allow me to click on one of the images and run the slideUp() function in jQuery. Here is my problem. I can click on the first image produced in the while loop but when I click on the second image nothing happens. The slideUp() function does not work. I don't know what to do. Here is the code below.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
$num_dresses = dress_count ();
$i=0;
while ($i < 2){
?>
<style>
div:hover { border:2px solid #021a40; cursor:pointer;}
</style>
<script>
$("div").click(function () {
$(this).slideUp();
});
</script>
<?php
$rand_id = rand(1, $num_dresses);
$dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
$new_file_name = $dress_feed_data['file_name'];
if (file_exists('fashion_images/' . $new_file_name)){
echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<br>
<div>
<img src=" fashion_images/<?php echo $new_file_name;?> " width="50" height="50" />
<div>
<br><br>
<?php
echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
?>
<br><br>
<?php
}
$i++;
}
?>
You are binding the click handler to the elements before the elemnts are inserted into DOM,
Probably when the first call is made no elements called div are there so the binding goes to void, then the first element gets inserted.
Now the binding for second element is made, now it gets attached to first one as it matches $('div') . So you got only forst one working.
The clean way is to take the click binding out of while loop, so that it happens only once, and call it on DOM ready event
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).slideUp();
});
});
</script>
And if you want to make a live binding, which applies to all dynamically added images as well use delegation:
<script>
$(document).ready(function(){
$('body').on('click',"div",function(){
$(this).slideUp();
});
});
</script>
If you are posting the above images with html to a host/parent page, just add the above delegation logic to parent page, and post only the images.
Try this :
<style>
div:hover { margin:10px 0; border:2px solid #021a40; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("div.randomImage").click(function() {
$(this).slideUp();
});
});
</script>
<?php
$num_dresses = dress_count();
$i=0;
while ($i < 2) {
?>
<?php
$rand_id = rand(1, $num_dresses);
$dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
$new_file_name = $dress_feed_data['file_name'];
if (file_exists('fashion_images/' . $new_file_name)) {
echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<div class="randomImage">
<img src="fashion_images/<?php echo $new_file_name;?>" width="50" height="50" />
</div>
<?php
echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
}
$i++;
}
?>
Notes:
Stylesheet and script moved outside the php while loop. Repetition is unnecessary and undesired.
jQuery statement now inside a $(function(){...}) structure to ensure it runs when the ducument is ready, ie. after the served HTML has been interpreted by the browser to create DOM elements.
class="randomImage" added to the <div>
Second <div> changed to </div>
For readability of source and served page, the PHP and HTML are indented independently.
I've not tried to verify the PHP.
I just asked another question here: global variable and reduce database accesses in PHP+MySQL
I am using PHP+MySQL. The page accesses to the database and retrieve all the item data, and list them. I was planning to open a new page, but now I want to show a pop div using javascript instead. But I have no idea how to utilize the variables of PHP in the new div. Here is the code:
<html>
</head>
<script type="text/javascript">
function showDiv() {
document.getElementById('infoDiv').style.visibility='visible';
}
function closeDiv() {
document.getElementById('infoDiv').style.visibility='hidden';
}
</script>
</head>
<body>
<ul>
<?php foreach ($iteminfos as $iteminfo): ?>
<li><?php echo($iteminfo['c1']); ?></li>
<?php endforeach;?>
</ul>
<div id="infoDiv" style="visibility: hidden;">
<h1><?php echo($c1) ?></h1>
<p><?php echo($c2) ?></p>
<p>Return</p>
</div>
</body>
</html>
"iteminfos" is the results from database, each $iteminfo has two value $c1 and $c2. In "infoDiv", I want to show the details of the selected item. How to do that?
Thanks for the help!
A further question: if I want to use, for example, $c1 as text, $c2 as img scr, $c1 also as img alt; or $c2 as a href scr, how to do that?
Try this:
<?php foreach ($iteminfos as $iteminfo): ?>
<li>
<a href="javascript:showDiv(<?php echo(json_encode($iteminfo)) ?>)">
<?php echo($iteminfo['c1']); ?>
</a>
</li>
<?php endforeach;?>
Also, modify showDiv to take your row data:
function showDiv(row) {
document.getElementById('infoDiv').style.visibility='visible';
document.getElementById('infoDiv').innerHTML = row['c1'];
}
Basically, you have to consider that the javascript runs in the browser long after the PHP scripts execution ended. Therefore, you have to embed all the data your javascript might need into the website or fetch it at runtime (which would make things slower and more complicated in this case).
Do you want a single info area with multiple items listed on the page and when you click an item the info area is replaced with the new content??? or you want a new info area for each item??
I see something along the lines of the first approach, so I will tackle the latter.
<?php
//do some php magic and get your results
$sql = 'SELECT title, c1, c2 FROM items';
$res = mysql_query($sql);
$html = '';
while($row = mysql_fetch_assoc($res)) {
$html .= '<li><a class="toggleMe" href="#">' . $row['title'] . '</a><ul>';
$html .= '<li>' . $row['c1'] . '</li><li>' . $row['c2'] . '</li></ul>';
$html .= '</li>'; //i like it when line lengths match up with eachother
}
?>
<html>
</head>
<script type="text/javascript">
window.onload = function(){
var els = document.getElementsByClassName("toggleMe");
for(var i = 0, l = els.length; i < l; i++) {
els[i].onclick = function() {
if(this.style.display != 'none') {
this.style.display = 'block';
} else {
this.style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<ul>
<?php
echo $html;
?>
</ul>
</body>
</html>