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;"
Related
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!
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
This question already has answers here:
java script append to <li/> does not work [closed]
(3 answers)
Closed 8 years ago.
I am trying to click one button to load a page into a div block dynamically. To test it, I try to append a list item with text "abc" into the loaded page. However, I always get a blank page. load function works fine because if I try to load a static page, it works. Following is my main html page code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LoadPageTest</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="./css/customizedstyle.css">
<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
<link rel="stylesheet" href="./css/jqm-demos.css">
<script src="./js/jquery.js"></script>
<script scr="./js/customizedjs.js"></script>
<script src="./js/jquery.mobile-1.4.3.min.js"></script>
<script>
$( document ).on( "pagecreate", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
}
}
});
});
</script>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body style= "overflow:hidden" scrolling="no">
<style type="text/css">
body {
overflow:hidden;
}
</style>
<div data-role="page" id="main-page" style= "overflow:hidden" scrolling="no">
<div role="main" class="ui-content" id ="maindiv" style= "overflow: auto">
Will load diff pages here.
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="b">
<ul data-role="listview" data-icon="false" id="menu">
<li>
<a href="#" id = "btnA" data-rel="close">Go Page A <img src="./images/icona.png" class="ui-li-thumb"/>
</li>
<li>
<a href="#" id = "btnB" data-rel="close">Go Page B <img src="./images/iconb.png" class="ui-li-thumb"/>
</li>
</ul>
</div><!-- /panel -->
<script type="text/javascript">
$("#btnA").on("click", function(){
$("#maindiv").empty();
$("#maindiv").load("pageA.html");
});
$("#btnB").on("click", function(){
$("#maindiv").empty();
$("#maindiv").load("pageB.html");
});
</script>
</div><!-- /page -->
</body>
</html>
Next is code for the page I try to load dynamically.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page should be loaded</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="./css/customizedstyle.css">
<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.3.min.css">
<link rel="stylesheet" href="./css/jqm-demos.css">
<script src="./js/jquery.js"></script>
<script scr="./js/customizedjs.js"></script>
<script src="./js/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).on('pagebeforeshow', function () {
$('#postlist').append('<li> abc </li>');
$('#postlist').listview('refresh');
});
</script>
</head>
<body >
<div data-role="page" id="posthome">
<div data-role = "content">
<ul data-role='listview' id = "postlist">
</ul>
</div>
</div>
</body>
</html>
I doubt if it is because my javascript in the page doesn't work, cause the swipe js code in the main page seems not work either. Is that possible? I have enabled javascript in the onCreate() function of the activity file as below.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_message);
new LongRunningGetIO().execute();
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(new AppClient());
mWebView.setVerticalScrollBarEnabled(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl("file:///android_asset/index.html");
}
I noticed there is a warning for statement to enable javascript "Using setJavaScriptEnabled can introduce XSS vulnerabilities into you application, review carefully". Will that maybe the reason? Then, I added #SuppressLint("SetJavaScriptEnabled") on top of the activity. The warning is gone, but the js code in pages seem still not work.
I had the same problem, i could solve it adding the line
myWebView.setWebChromeClient(new WebChromeClient());
My code works fine when viewing the web page on a computer, but when I use the emulator or iPhone with xCode the entire page does not load. Perhaps the top 10 - 25% of the page appears and the rest is cut off. Below is an example of code. All help is appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
object {
width: 100%;
min-height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery-mobile-slide-menu.css" type="text/css" />
<script type="text/javascript" src="js/jquery-mobile-slide-menu.js"></script>
<script>
function MyFunction(id) {
var num=id;
if (num == "foxnews") {
$("#content").mobile.loadPage("http://m.foxnews.com");
}
if (num == "cnn") {
$('#content').load('http://m.cnn.com');
$('#content').trigger("pagecreate").trigger("refresh");
}
if (num == "home") {
location.reload();
}
//$("#content").html('<object data="http://www.foxnews.com" />');
//document.getElementById("content").innerHTML="<img src='Background.png'>";
}
</script>
</head>
<body>
<div id="side-menu">
<ul>
<li><a id="home" href="" onclick="MyFunction(this.id);">Home</a></li>
<li><a id="cnn" href="#" onclick="MyFunction(this.id);">   CNN</a></li>
<li><a id="foxnews" href="#" onclick="MyFunction(this.id);">   Fox News</a></li>
<li>Page 2<span class="icon"></span></li>
<li>Page 3<span class="icon"></span></li>
</ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
<div data-role="header" data-theme="b">
Menu
<h1>Header</h1>
</div>
<div id="content" data-role="content">
<p>Content Goes Here</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#side-menu').slideMenu();
});
</script>
</body>
</html>
keyword: crossdomain
Excerpt from deprecated Jquery Mobile:
"When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true."
Load page to a div jQuery Mobile:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
but maybe i am completely on the wrong scent; but you should open a jsfiddle, otherwise its just like searching a needle in a haystack.