Show featherlightbox pop up on page load - javascript

I'm going to be totally honest. I have zero experience in wordpress php coding but I can do simple adjustments using the wordpress admin. Now I'm facing a problem. I used the feather lightbox js. I have a code below which shows the part of the footer.
<?php if ( is_front_page() ) : ?>
<script>
jQuery(document).ready(function() {
$.featherlight("#mylightbox");
//console.log("hi");
});
</script>
<?php endif; ?>
<?php wp_footer(); ?>
Open element in lightbox
<div id="mylightbox">This div will be opened in a lightbox</div>
</body>
With this the featherlightbo pops up when i clicked the anchor tag. But what i want to do is to have the feather lightbox to open it on page load. As you can see in my code there's a part there says if front_page which has also ready function. It returns an error
Uncaught TypeError: Cannot read property 'featherlight' of undefined
Please I need your help anyone.
Thanks.

<div id="mylightbox">Text to display in box</div>
For this popup use the script
$.featherlight($('#mylightbox'), {});
This will work

It seems like jQuery isn't defined using the $-sign, since jQuery.(document) works.
Change $.featherlight to jQuery.featherlight and it should work.
As you asked in your comment, you can initially hide the div by adding the css property: display: none on that div.

Related

reCaptcha not shows on my singlepage website

I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?
I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.
update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>
You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>

Where to declare javascript/jQuery scripts

I'm trying to do some stuff with jquery/js (I don't know which one it is..), for example this script ; http://pastebin.com/V3HpU0NY - > http://blog.mainstreethost.com/light-youtube-embeds-faster-page-load#.VG9HKamkVSJ
But now comes the difficult part.
Url: http://erwin.my89.nl/stage/sieh/
This is the website when you go to the url.
This loads the "gallery (top)" and all content/ and kinda images(lazyload) for all the 'gallery' posts. If this has to be done another way please say so.
When you click a image you'll get this:
I hope you understand the idea.
So everything working ok
but now i go in to the inspector and i encounter this?!
I assume it is because i have the script defined in the loop of the content.. so when i click a gallery image, it loads another bunch of those text/css's.
So my question is: Is this the right way to do it? or should i be doing this different?
while ($loop->have_posts()) : $loop->the_post($post->ID);
if ($metas) {
foreach ($metas as $metakey) {
} elseif ($metakey['url']) {
preg_match(
'/[\\?\\&]v=([^\\?\\&]+)/',
$metakey['url'],
$matches
);
$id = $matches[1];
?>
<div class="youtube" id="<?php echo $id ?>" style="width: 560px; height: 315px;"></div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/youtube.js"></script>
<?php
^part of the code, if need more please say so.
Thanks in advance!
Can you put your CSS file/s in the head? That's where it normally goes.
Also, I don't see anywhere in your PHP where it could be loading these <style></style> tags. However it does look like it's going to import the same script at the end of each loop.
Could you provide more information on what your exact problem is?

PHP: Reading DOM info of own HTML page

So, let's say I have only one file on my server called index.php :
<!DOCTYPE html>
<html>
<body style="background-color: orange;">
<!-- On/Off button's picture -->
<?php
echo ("<img id='button' src='data/button.jpg' alt='off'/>");
?>
</body>
</html>
Now, let's say I attach a JavaScript that changes the buttons ALT to ON when I click the button at some point.
How can I read the DOM elements on this page using PHP?
So far, I've found this code:
$dom = new DOMDocument;
$dom->loadHTML($html);
$main = $dom->getElementById('alt');
but I can't figure out how I would fit that in my code above, what page should I call loadHTML() for?
How do I make PHP read DOM elements it generated using echo?
First of all, your button has id button, so searching for the id alt would return no results.
Second: The piece of php you found reads a page $html (probably file_get_contents('some_url'), puts it in the variable dom and parses it, searching for the id alt. In your case it would read your own page, breaking it down in pieces looking for that button.
Thats of no use if you can read the status with javascript on your own page. You can then pass it to php trough an ajax-call or by adding it to the url like mypage.php?button=off
$main = $dom->getElementById('button');

Setting DIV Content With JS Not Working, So Close

I'm trying to replace a div's content with a sourceURL and it works in just a flat html setup, but when I try to incorporate it into a php page it doesn't want to work and I can't figure out why.
..and yes I'm loading jquery.
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load("http://forexfbi.com/"+sourceURL+"");
}
</script>
and
echo "<tr class=\"expand-child\"><td colspan=\"11\" height=\"100px\">$name1<br>"; ?> Link 1 <?php echo"<div id=\"content\"></div></td></tr>";
start with checking browser console to see the error. It may be a possible jquery confict in your php file.
Please state the error you found on console. press f12 and click on console.

Need help to resolve a slider javascript conflict with Safari

I'm facing a problem with a slider that I'm using on a website.
(www.cloosedesign.com)
The website is a portfolio I made for a friend. So there are severals works to show.
Each work is listed as a link, and when you click on the link it shows you the corresponding picture with the slider. (I've put some PHP to get the right pictures from the database Mysql).
It works fine, except on SAFARI. Indeed sometimes when I click on a link the text of the footer (white text on the black box) desappear and re-appear, like if the page was refreshing.
This pb appear sometimes after the 3rd click, or sometimes after more clicks.
here is my code :
in the <head> :
I'm calling jquery :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
And I'm calling the javascript file for the slider :
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
then in the portfolio_english page I'm checking the images corresponding to the work selected (= $contenu):
<?
$images_sql = "SELECT * FROM `a_fichier`
WHERE id_fiche=".$contenu."
ORDER BY tri";
$images = mysql_query($images_sql);
echo'<div id="slides">';
echo '<div class="slides_container">';
while ($image=mysql_fetch_array($images))
{
echo "<img src='Images/PorteDoc2/".$image['nom']."' width='540' height='600' alt='".$image['titre']."' />";
}
echo '</div>';
echo '</div>'; ?>
And just after the php code I write the following javascript :
<script type="text/javascript">
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
</script>
And then I call the footer.php file.
Thanks
This http://jsfiddle.net/NNSqw/ is the code that does what I mean, it uses jquery and ajax, now, to explain the html bit is pretty straight forward the div with the id="content" will be where your content will get loaded into.
Now to the JS/JQuery, everytime a user presses a link the content of the div with the id="content" gets changed, you will have to make a page named get_images.php and make it use the php code $_GET['realisation']; to get the number of the link clicked and from there it will work like your current page :).
Sorry I'm not brilliant at explaining but, if you wish me to try and clarify it more just say :)
Edit:
Right in your portfolio_english.php file the following code should exists (I'm using the english version of your site):
<span class="link" onClick="javascript: show_image('1')">Entreprise internationale 1</span><br>
<span class="link" onClick="javascript: show_image('2')">Entreprise internationale 2</span><br>
<span class="link" onClick="javascript: show_image('3')">Entreprise internationale 3</span><br>
<span class="link" onClick="javascript: show_image('4')">Entreprise internationale 4</span>
You should have your links that the side, which have an onClick event leading them to the javascript function which should be in the head of the page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
show_image(no){
$.ajax({
url: 'get_images.php?realisation='+no,
success: function(data) {
$('#content').html(data);
}
});
}
</script>
[... rest of header ...]
</head>
Also in that file you should have the div where the images currently appear
<div id="content">
</div>​
get_image.php
In your get_image.php you need to have what you currently use to get your images, so to get the number e.g. 41 into the php code you are using use:
<?php
$number = $_GET['realisation'];
[... Rest of php code to retrieve images ...]
?>
Also, if you still don't understand where I'm going try reading the jquery documentation to see if you understand it more then: http://api.jquery.com/jQuery.ajax/
OK, before any real investigation let's get a few things out of the way.
Update jQuery to the newest version (http://jquery.com/), then you don't need the easing plugin as it's built in nowadays.
Rather than bind to window.onload, use the proper syntax for using jQuery:
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
If that isn't any good, make a really small test page that only has the code you are using with the slider, and check if it's still a problem.
To be honest, I don't really know why people use these massive slider plugins, making a slider is an easy little job that requires less than 10 lines of jQuery.

Categories