I have a problem. I used javascript for settings display block or display none. I get an error in the console "Uncaught TypeError: Cannot set property 'onclick' of null
at script.js?ver=1.0.0:15". I added a script tag in the header, then in the footer and still the same.
Also I added defer in my script tag and still nothing. Function it works on another site.
JS Code
var element = document.getElementById('powierzchnia');
if (element.className === 'show col-12 gallery-block grid-gallery') {
element.className = 'hide col-12 gallery-block grid-gallery';
document.getElementById('powierzchnia_chup').style.display = 'none';
document.getElementById('powierzchnia_chdown').style.display = 'inline';
} else {
element.className = 'show col-12 gallery-block grid-gallery';
document.getElementById('powierzchnia_chup').style.display = 'inline';
document.getElementById('powierzchnia_chdown').style.display = 'none';
}
}
HTML and PHP code
<div class="first-box">
<h4 id="show-powierzchnia" style="cursor: pointer;">
<span>Powierzchnia panela</span>
<span class="span-fr">
<img id="powierzchnia_chup" style="display: none;" src="<?php echo get_template_directory_uri(); ?>/img/chervon-up.svg" />
<img id="powierzchnia_chdown" src="<?php echo get_template_directory_uri(); ?>/img/chervon-down.svg" />
</span>
</h4>
</div>
<div id="powierzchnia" class="hide col-12 gallery-block grid-gallery">
<div class="row">
<?php
foreach( $media_wzory_powierzchnia as $wzory ){
echo '<div class="col-md-3 item item-custom-gallery mb-3">';
echo '<a class="lightbox" href="'.wp_get_attachment_url($wzory['zdjecie_powierzchni']).'">';
echo '<img class="img-gallery image scale-on-hover" src="'.wp_get_attachment_url($wzory['zdjecie_powierzchni']).'">';
echo '<div class="w-100 text-center">';
echo '<h5>'.$wzory['nazwa_powierzchni'].'</h5>';
echo '</div>';
echo '</a>';
echo '</div>';
}
?>
</div>
</div>
try using DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function() {
// code...
var element = document.getElementById('powierzchnia');
if (element.className === 'show col-12 gallery-block grid-gallery') {
element.className = 'hide col-12 gallery-block grid-gallery';
document.getElementById('powierzchnia_chup').style.display = 'none';
document.getElementById('powierzchnia_chdown').style.display = 'inline';
} else {
element.className = 'show col-12 gallery-block grid-gallery';
document.getElementById('powierzchnia_chup').style.display = 'inline';
document.getElementById('powierzchnia_chdown').style.display = 'none';
}
});
Now the script should run only when the Html content has been loaded :)
Related
I need to adjust my code so that the video is played in the modal that is opened when the user clicks on it.
This code was implemented in a modal that was to display images.
I use JS: https://dimsemenov.com/plugins/magnific-popup/documentation.html
PHP:
<?php
$url = 'https://www.youtube.com/feeds/videos.xml?channel_id=ID';
$xml = simplexml_load_file($url);
$ns = $xml->getDocNamespaces(true);
$xml->registerXPathNamespace('a', 'http://www.w3.org/2005/Atom');
$elementos = $xml->xpath('//a:entry');
$conteudo = $elementos[0];
$videos_pagina = "12";
$page = isset($_GET['pagina'])?intval($_GET['pagina']-1):0;
$total_paginas = ceil(count($elementos)/$videos_pagina);
if (isset($_GET['pagina']) && is_numeric($_GET['pagina'])) {
$pagina = (int) $_GET['pagina'];
} else {
$pagina = 1;
}
if ($pagina > $total_paginas) {
$pagina = $total_paginas;
}
if ($pagina < 1) {
$pagina = 1;
}
$offset = ($pagina - 1) * $videos_pagina;
$range = 3;
$prevpage = $pagina - 1;
$nextpage = $pagina + 1;
$anterior = $baseurl."/videos/pagina/".$prevpage;
$proxima = $baseurl."/videos/pagina/".$nextpage;
?>
HTML:
<section class="about-section pb30">
<div class="container">
<div class="row">
<?php
foreach (array_slice($elementos, $page*$videos_pagina, $videos_pagina) as $item) {
$media = $item->children('http://search.yahoo.com/mrss/');
$yt = $item->children('http://www.youtube.com/xml/schemas/2015');
$miniatura = $media->group->thumbnail->attributes()->url->__toString();
$titulo = $item->title;
$url_embed = "https://www.youtube.com/embed/".$yt->videoId;
?>
<div class="col-sm-6 col-md-6 col-lg-4">
<div class="gallery_item">
<img class="img-fluid img-circle-rounded w100" src="<?php echo $miniatura; ?>" alt="<?php echo $titulo; ?>">
<div class="gallery_overlay"></span></div>
</div>
</div>
<?php } ?>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gallery_item" align="center"><br>
<button type="button" <?php if ($pagina > 1) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $anterior; ?>';" class="btn btn-lg btn-thm">Página anterior</button>
<button type="button" <?php if ($pagina != $total_paginas) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $proxima; ?>';" class="btn btn-lg btn-thm">Próxima página</button>
</div>
</div>
</div>
</div>
</section>
Currently when the user clicks on the video he opens the modal, however I need the video to be loaded.
How should I do?
You can easily embed or place the YouTube video inside a Bootstrap modal like you do on the normal web pages. Just get the code to embed the video from YouTube site and place it inside the .modal-body element. But there is small problem; the YouTube video doesn't stop automatically when you close the modal window. It will still play in the background.
To solve this problem you can simply toggle the url value of the YouTube's video iframe src attribute dynamically using the jQuery. Let's try out the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
</style>
<script>
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<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>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I got a a custom loop into my Wordpress custom blog page, and Im displaying all my posts into it, like that :
<section class="container blog-article-actu">
<div class="row">
<?php
$the_query = new WP_Query('showposts=-1');
while ($the_query->have_posts()) :
$the_query->the_post();
$catObj = get_the_category();
?>
<article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><?php echo $url ?>');">
<div class="blog-article-actu-article-top">
<h2><?php the_title(); ?></h2>
<div class="details-blog-article-actu">
<div class="blog-article-actu-date">
<span class="day"><?php the_time( 'd' ) ?></span><br>
<span class="month"><?php the_time( 'F' ) ?></span>
</div>
<a href="#" target="_blank"><p>
<?php
if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) {
echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">";
} elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) {
echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">";
} elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) {
echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">";
} else {
echo "";
}
?>
</p></a>
</div>
</div>
<div class="blog-article-actu-article-bottom-wrap">
<span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>
<span class="blog-article-actu-article-bottom">En savoir <span>+</span></span>
<div class="social-blog-article-actu">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</div>
</article>
<?php // End of the loop.
endwhile;
?>
</div>
</section>
Then I was asked to build something to sort them, by tags, dynamically, with a tag system like this one : https://codepen.io/Chaaampy/pen/gWOrvp
But Im a bit lost about that ... I thought about get the tags for each posts in my loop, and then add them as a CSS class, like that maybe I could show or hide some articles in JS ... Meh, I don't know, has someone got any ideas for me ?
Thanks ! :)
If anyone is interested, found a solution by building something like that : https://codepen.io/Chaaampy/pen/gWOrvp
$(function filter() {
var selectedClass = "";
$(".link").click(function(){
selectedClass = $(this).attr("data-rel");
$(".wrap").fadeTo(100, 0.1);
$(".wrap section").not("."+selectedClass).fadeOut().removeClass('scale_anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale_anm');
$(".wrap").fadeTo(300, 1);
}, 300);
});
});
Note that I get the tags into Wordpress with get_the_tags, and then I add them as a class to the elements I want to show / hide
Hopefully, my question is not too complicated.
function showSkills(event,str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;
}
};
xmlhttp.open("POST","skills.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
event.target.parentElement.parentElement.parentElement.nextElementSibling.style.display = "block";
}
The block is diplayed, so the last row of code is fine, but I cannot post $q. I know where the problem is, but I don't know how to fix it:
If I put document.getElementById("skills").innerHTML = this.responseText; instead of event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText; everything works fine, but only for <div id="skills'>, not for skills2 of course. I have to use this script for more div IDs (skills, skills2, skills3) separately.
My HTML:
<div class="bgimg" style="background-image:url('pic/a3.jpeg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 1st Parallax -->
<div class="bgimg" style="background-image: url('pic/a5.jpg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport2" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills2" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 2nd Parallax -->
and sport.php code:
<?php
include 'cookies.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST['q'])) {
$q = $_POST['q'];
}}
?>
<div class="dropdown marginTop">
<button><!-- select sport -->
<?php // "select your sport"
if (isset($q)) {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM sports WHERE name1="' .$q. '" LIMIT 1');
} else {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM page WHERE title="selSport1" LIMIT 1');
}
$row = mysqli_fetch_row($result);
print_r($row[0]);
?>
</button>
<div class="dropdown-content">
<?php // sports list
$sportlist = mysqli_query($con, 'SELECT * FROM sports WHERE title = "sports" ORDER BY ' .$language. ' ASC');
while ($row = mysqli_fetch_array($sportlist)) {
echo '
<button class = "buttonList" value="' . $row[1] . '"';?>
onclick="showSport(event, this.value); showSkills(event, this.value);"
<?php echo ' style="border:0;">' . $row[$language] . '</button>
';
}
?>
</div>
</div>
So after showSport() was invoked, the button with $q value is diplayed in sport.php. This works fine for both div IDs: sport and sport2 aswell. Another function showSkills() should open skill.php in <div id="skills"> or in <div id="skills2"> and post $q there. The section was opened, but without $q inside.
Any ideas? Would help me a lot.
event.target.parentElement.parentElement.parentElement.nextElementSibling is far too much climbing up the DOM for my taste. When I understand you right, you use the same function as a event handler for multiple elements. Why don't you just pass the ID of the particular, associated div as a parameter? I add an example below.
// Note, I do not know what your 'str' is, so here it is just 'foo'
document.getElementById('event-div-1').addEventListener('click', showSkills.bind(null, 'skills1', 'foo'));
document.getElementById('event-div-2').addEventListener('click', showSkills.bind(null, 'skills2', 'foo'));
document.getElementById('event-div-3').addEventListener('click', showSkills.bind(null, 'skills3', 'foo'));
function showSkills(skills, event, str) {
// Ajax stuff
document.getElementById(skills).style.display = 'block';
}
.skills {
display: none;
}
<div class="skills"
id="skills1">1</div>
<div class="skills"
id="skills2">2</div>
<div class="skills"
id="skills3">3</div>
<div id="event-div-1">Click me for skills 1</div>
<div id="event-div-2">Click me for skills 2</div>
<div id="event-div-3">Click me for skills 3</div>
I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.
PHP/HTML
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div class='pic'>
<img src= " . $dir . $pic_array[$index] . " />
</div>
<div class='caption'>
<p id='title'>$titles[$index]</p>
<p id='des'>$descriptions[$index]</p>
</div>
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</html>";
$conn->close();
?>
Javascript
$(function () {
var arrPix = $('#json_pics').val();
var arrPix = $.parseJSON( arrPix );
var index = 0;
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $next = $slides.find('.next');
var $previous = $slides.find('.previous');
var $caption = $slides.find('.caption');
var slide_length = $slide.length;
$slider.hover(function() {
$caption.css('opacity', '1');
$next.css('opacity', '1');
$previous.css('opacity', '1');
}, function() {
$caption.css('opacity', '0');
$next.css('opacity', '0');
$previous.css('opacity', '0');
}
);
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
});
EDIT: Should I be using load instead?
In an endeavor to get you a solution that
Uses AJAX
and uses PHP,
I would suggest something like the following.
'getpic.php'
Summary: (A new file... used to simplify the process of getting a new picture.)
Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.
$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;
function priWrap($index) {
/*
This handles the actual generating of the <img> tag as well as
the caption and such.
$index refers to a specific picture in $pix_array.
*/
global $pix_array, $dir, $titles, $descriptions;
$arr_len = count($pix_array);
if ($index < 0) {
$index = $arr_len-1;
}
else if { $index >= $arr_len) {
$index = 0;
}
echo "<div class='pic'>
<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
</div>
<div class='caption'>
<p id='title'>" . $titles[$index] . "</p>
<p id='des'>" . $descriptions[$index] . "</p>
</div>";
}
#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
$index = intval($_GET['index']);
priWrap($index);
}
Changes to 'gallery_.php'
The code you posted should now look like this:
require_once('getpic.php');
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div id='picWrapper'>";
echo priWrap($index) . "
</div><!--End #picWrapper-->
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</body>
</html>";
$conn->close();
?>
Your javascript needs changed, too.
var index = 0;
should be
var index = parseInt($(".pic img").attr("data-ind"));
and
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
should be
$next.click(function() {
index++;
$("#picWrapper").load("getpic.php?index=" + index,
/*Add callback so that index is updated properly.*/
function () {
//update our index
index = parseInt($(".pic img").attr("data-ind"));
//show our caption stuff...
$(".caption").css('opacity', '1');
}
);
});
Im stuck with javascript part.please help me to solve this. I want to stop slider animation when mouse hover.
this is my code. i used worpresstheme. then slider load with wordpress part. how can i stop slider when mouse hover.
$query=new WP_Query($args);
if($query->have_posts()) {
$hasSliderEmpty=false;
echo '<div class="slides-container">';
echo '<div onmousemove="myMoveFunction()" onmouseout="myOutFunction" id="home_slider">
<section class="autoheight home_slider">
<section class="inner-slider">
<div id="slider_562472b018d72">
<div class="slides-container">';
$c=0;
while($query->have_posts()) {
$query->the_post();
echo get_the_post_thumbnail(get_the_ID(),'large');
}
global $wpdb;
$vimeoLink= $wpdb->get_var("SELECT meta_value FROM fts_postmeta WHERE post_id = '$event_id' and meta_key='_event_after_movie_link'");
if($vimeoLink != ''){
//echo $vimeoLink;
echo '<iframe src="//player.vimeo.com/video/'.$vimeoLink.'" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
}
echo '</div>';
echo '</div>
<div class="col-lg-12 landing-text-pos image_content wow animated fadeInDown" data-wow-duration="1s" data-wow-delay="1s" style="top:35%;">
<div class="slider_inner_content">
<div class="container align-center" style="padding-top:15px;">
</div>
</div>
</div>
<script type="text/javascript">
window.globalSlides = "#slider_562472b018d72";
window.globalSliderSpeed = "5000";
window.globalSlidesActive = "yes";
</script>
<script type="text/javascript">
window.globalHeaderTransparentActive = "yes";
</script>
</section>
</section>
</div>
</div>';
?>