Im programing website, I use this code before and it works perfect but now when I want to use some flash parts its realoading all website everytime I click link.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Hot King Staff</title>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="tagi" />
<meta name="Author" content="Filip Jóźwiak" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquB895.js"></script>
</head>
<body>
<div id="cialo">
<?php include('header.php'); ?>
<?php include('menu.php'); ?>
</div>
<div id="content">
<?php
$id = isset($_GET['id']) ? $_GET['id'] : '';
switch($id)
{
case '':
include 'content/news.php';
break;
case '2':
include 'content/dogs.php';
break;
case '3':
include 'content/training.php';
break;
case '4':
include 'content/links.php';
break;
case '5':
include 'content/contact.php';
break;
default:
echo 'Taka strona nie istnieje';
break;
}
?>
</div>
</body>
</html>
and this is code of my menu.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
</body>
</html>
Can you help me with that, thanks for response.
first:
you are including ur menu, why did you set:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
</body>
</html>
??? if you wnt to include this, than include just your menu:
<div id="news"></div>
<div id="dogs"></div>
<div id="training"></div>
<div id="links"></div>
<div id="contact"></div>
If you want to change a specific part of the site without refreshing it completly you could use jQuery
In your main page add this piece of jquery but notice that before you can use jquery you will need to include it in your website
$.ajax({
url: '/pages.php?page=dogs
success: function(data) {
$('#content').innerHTML(data);
}
});
Now create a pages.php
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET') {
if (isset($_GET['page'])) {
$page = $_GET['page'];
switch($page)
{
case 'dogs':
echo 'dogs';
break;
case 'cats':
echo 'cats';
break;
default:
echo 'Taka strona nie istnieje';
break;
}
}
}
?>
And don't forget to add the content div in your main page like so
<div id="content"></div>
Related
I'm trying to figure out how to use Ajax. The only thing that I succeeded learning is the load function. Now I'm try to use $.ajax({}). Now here's my attempt using this function:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#send").click(function(){
$.ajax({
url:"show.php",
method: "post",
data :{value: <?php echo $value;?>},
success:function(data){
$("#showVal").html(data);
alert("succes");
}
});
});
});
</script>
</head>
<body>
<p id="showVal" ></p>
<form id="test" name="tst">
<?php
$value = 15;
?>
<button type="button" id="send">Press me!</button>
</form>
</body>
</html>
And the show.php file is:
<?php
$val=$_POST['value'];
echo 'Your value '.$val.' . Have a nice day!';?>
If you know what could be the problem share with me ! Thanks ! Have a great day guys!
Help is required :) I've piece of the code, like this:
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="hexagons.css">
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// function disp(){
// document.getElementById('hexGrid').style.display = 'none';
// }
</script>
</head>
<body>
<iframe name="display" id="display_template"></iframe>
<ul id="hexGrid">
<?php
foreach ($dirs as $link) {
if ($link != 'assets') {
echo '
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="'.$linkArray[$link].'" onclick="disp(); return false;" target="display" >
<img src="assets/dir.png" alt="'.$link.'" />
<h1>' . $link . '</h1>
<p>Redirect to template</p>
</a>
</div>
</li>
';
}
}
?>
</ul>
</body>
I wanted to achieve that on onClick at link, #hexGrid will change display style to none and in the same time to iframe will be loaded some content.
When JS is commented, on click, iframe is loading selected content correctly, but while JS is active it is simply making hidden #hexGrid without loading content into iframe.
Any idea what went wrong ? :)
Solution found there should be onclick="disp(); return true;" instead onclick="disp(); return false;"
I have to ask you guys, what is wrong in this code, I created a preloader for my website but I failed at the javascript:
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-one"></div>
<div class="loader-section section-two"></div>
</div>
So the preloader stops as soon as the <body> tag get the class="loaded". But for some reasons the <body> doesn't receive the class.
I don't know if it helps, but here's the whole file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
<style type="text/css">
html {
background-color: #000 !important;
background-image: none !important;
}
</style>
<? endif ?>
</head>
<body>
<!-- Render logo or title with site URL -->
<a href="<?= $view->url()->get() ?>">
<?php if ($logo = $params['logo']) : ?>
<img src="<?= $this->escape($logo) ?>" alt="">
<?php else : ?>
<?= $params['title'] ?>
<?php endif ?>
</a>
<!-- Render widget position -->
<?php if ($view->position()->exists('sidebar')) : ?>
<?= $view->position('sidebar') ?>
<?php endif; ?>
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Render content -->
<?= $view->render('content') ?>
<!-- Insert code before the closing body tag -->
<?= $view->render('footer') ?>
</body>
</html>
Hope somebody can help me there and sorry for my bad english ^^.
change your script as below it might caused an issue
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 1500);
});
</script>
Update
Add jquery min js this is issue if you don't load jquery js <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> add this line top of the function or inside head tag
Update 1
Update your head tag as below
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
//add below line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
<style type="text/css">
html {
background-color: #000 !important;
background-image: none !important;
}
</style>
<? endif ?>
</head>
For more info find this fiddle
Hope it helps.
I create a new template page for one of the pages on my WordPress site because all I want on on that page is some text and a YouTube video. From what I understand, WordPress doesn't accept simply embedding a YouTube video within your code, you must use the YouTube Player API.
But to be honest it's not very clear to me how to apply it to my current code. What can I try next?
<?php /* Template Name: Black Ballad Crowdfunding Subscriptions*/ ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php get_header(); ?>
<title>Black Ballad Crowdfunding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#more1").click(function(){
$(".reveal1").slideToggle("slow");
$(".video-container1").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="container">
<div id="intro">
<p>Some text.</p>
<p class="reveal1">Some more text.
<div class="video-container1" align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
</div>
</p>
<div id="more1" align="center" title="View More">
<img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>
</div>
</body>
<?php get_footer(); ?>
Try do_shortcode()
https://developer.wordpress.org/reference/functions/do_shortcode/
For youtube
echo do_shortcode( '[embed]https://www.youtube.com/user/bluehost?v=zQ-eL7zH6rQ[/embed]' );
Just commenting to say that the accepted answer no longer works in 2022. We need an update to this as the embed shortcode no longer seems to function properly.
You can do it like this:
global $wp_embed;
echo $wp_embed->run_shortcode( '[embed]https://vimeo.com/51589652[/embed]' );
I usually build my website's pages in .html and then, when everything works, I create the .php page for db and all the server-side stuff.
'Till now I hadn't any problem, but since when I'm trying to integrate some JS scripts in my pages, every time, the same script that in the .html sample works fine in the .php page doesn't work fine or doesn't work at all. Today I was "fighting" with the LightGallery script integrated in my gallery.php file.
I tried everyhing possible before posting this question but whitout any success; I definitely need your help!
This code in the .html page referres to the jQuery gallery and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="test/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="test/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="test/js/lg-thumbnail.js"></script>
<script src="test/js/lg-fullscreen.js"></script>
<script src="test/js/lg-autoplay.js"></script>
<div id="header">
....
</div>
<div id="content">
<div id="selector1">
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
</div>
</div>
<div id="footer">
.....
</div>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
Since it worked, I integrated it in this .php file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marco Brigonzi">
<?php
/* check URL */
$query_url = $_SERVER['QUERY_STRING'];
$pageID = substr($query_url, 6);
?>
<title>Album: "<?php $title = ucfirst($pageID);
echo $title; ?>" | Photo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="script/lightgallery/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<?php include("php/header-footer.php"); ?>
</head>
<body>
<?php include_once("php/analyticstracking.php"); ?>
<!-- jQuery version must be >= 1.8.0; -->
<!-- <script src="jquery.min.js"></script> -->
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="script/lightgallery/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="script/lightgallery/js/lg-thumbnail.js"></script>
<script src="script/lightgallery/js/lg-fullscreen.js"></script>
<script src="script/lightgallery/js/lg-autoplay.js"></script>
<script src="script/lightgallery/js/lg-hash.js"></script>
<script src="script/lightgallery/js/lg-pager.js"></script>
<script src="script/lightgallery/js/lg-zoom.js"></script>
<?
$current = "photo";
head($current);
?>
<div id="content">
<div id="selector1">
<?php
/* check URL */
if($pageID == 'urban')
{$pageCode = '1';}
elseif($pageID == 'art')
{$pageCode = '2';}
elseif($pageID == 'street')
{$pageCode = '3';}
elseif($pageID == 'nature')
{$pageCode = '4';}
else
{echo 'Error 0';}
/* connessione */
......connection values........
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn)
{die("Connection failed: " . mysqli_connect_error());}
/* SET utf8 charset for special characters */
if (!mysqli_set_charset($conn, "utf8"))
{printf("Error loading character set utf8: %s\n", mysqli_error($conn));
exit();
}
$sql_pic = 'SELECT * FROM photos WHERE album="'.$pageCode.'" ORDER BY rating DESC';
$result_pic = mysqli_query($conn, $sql_pic);
if (mysqli_num_rows($result_pic) > 0)
{
while($row_pic = mysqli_fetch_assoc($result_pic))
{
echo '<div class="item" data-src="img/photo/'.$pageID.'/'.$row_pic["name"].'.jpg" alt="">
<figure>
<img src="img/photo/'.$pageID.'/thumb/'.$row_pic["thumb"].'.jpg" alt="">
</figure>
</div>';
}
}
else
{echo 'Error 1';}
mysqli_close($conn);
?>
</div>
</div>
<?php foot(); ?>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
And, of course, it stops working. I tried to put the JS scripts' calling at the end of the page but nothing changes. I've really no clue, 'cause the code is exactly the same! It's only integrated in a .php dynamic page.
[SOLVED] This time the problem was the capital letter in the CSS call: the server host renamed lightGallery.css in lightgallery.css so the CSS file was missing. Thanks everyone for the help!