When i call the "elem" var in the console it finds the element i want, but only after i run in the console it deletes the element not when the page is loaded.
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<link rel="stylesheet" href="../../CSS/index.css">
<body>
<div>
<?php
$page=$_GET['id'].".html";
echo '<iframe src="' .$page.'" id="'.$_GET['id'].'" frameBorder="0" width="70%" height="100%" align="left" scrolling="no" />';
echo '</iframe>';
?>
</div>
<?php
echo " <script>
var elem=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id."');
elem.parentNode.removeChild(elem);
</script> ";
?>
</body>
</html>
Try with code, Hope it might help you.
document.getElementById('myframe1').contentWindow.document.getElementById('x');
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!
When i echo the script the code in the "inspect element" appears between ("") and i cant delete the element by id "down" after the page load.
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/index.css">
<body>
<div>
<?php
$page=$_GET['id'].".html";
echo '<iframe src="' .$page.'".html frameBorder="0" width="70%" height="100%" align="left" scrolling="no" />';
echo '</iframe>';
?>
</div>
<div>
<iframe src="../../galeria/frame2_galeria.html" frameBorder="0" width="29%" height="600px" align="right" scrolling="yes" />
</iframe>
</div>
<?php
echo "<scritp>
function removeElem(){
var elem = document.getElementById('down');
elem.parentNode.removeChild(elem);
return false;
}
</scritp>";
?>
</body>
</html>
<scritp>
<script>
I think it's just a typo
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 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 have an HTML file with the following content
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<meta content="desc goes here" name="description">
<meta content="auth name" name="author">
<title>builder 1.0</title>
</head>
<body>
<iframe width="100%" height="100%" src="http://domain.com/a.html" name="cxsideframe" scrolling:'no';="" id="frame1" style="overflow:hidden;">
</iframe>
</body></html>
The content of a.html is
<html>
<head>
<meta charset="utf-8">
<title>builder v1.0</title>
<body>
<img src="http://example.com/images/01._V397411194_.png" style="display:none" alt=""/>
<img src="http://example.com/images/V386942464_.gif" style="display:none" alt="" />
</body></html>
I need to know a method to get the contents of meta tags and image lists of parent page html from the parent page using jQuery or javascript.
$('meta[name=author]').attr("content"); does not work for me
You can use document.getElementsByTagNames, and then manipulate the array returned
var metas = document.getElementsByTagName("meta");
var imagesOnPage = document.getElementsByTagName("img")