magnific popup not working In shopify - javascript

I am working on custom magnific popup with shopify site.In my header.liquid file am calling the magnific popup content.
<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
popup content here.
</div>
Here i have added the script in theme.js.liquid
$('#open-popup').magnificPopup({
items: [
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
But It shows the following error
TypeError: $(...).magnificPopup is not a function
If anyone please tell me if am i miss something like js library files.
Thanks in advance.

I am found the actual problem for this issue.Some of the themes having default magnific pop-up library in theme.js.liquid file.
My new theme brooklyn was having magnific pop-up library already.So it was working fine now.
So check with theme.js.liquid file having magnific popup library present or not.

are you sure that jQuery is included? if so, is it imported before magnificPopup?

I had a similar issue even though the magnificPopup code was included in my theme.js.
Don't ask me why - after wrapping the magnificPopup call in the window.onload it started working.
<script>
window.onload = function() {
$('.open-popup').magnificPopup({
type:'inline',
midClick: true
});
}

Related

Custom Facebook share button does not work

Can somebody explain why my custom Facebook share button does not work?
Whenever I click the button it the share window just does not show up.
I've tried it as html file on an actual webserver, and I've read everything in the facebook docs regarding the share button.
When using the same code provided by facebook it does work.
I do get this error though when clicking on the button.
This is my code. (Without the CSS because its a bit more, If you need it I can add it.)
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>
<div class="page-header">
<h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>
<script>
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: 'https://nureinberg.de',
}, function(response){});
}
</script>
You need to initialize the FB SDK,
This includes the FB.init function and having the <div id="fb-root"></div> element.
Check out this pen - it works just fine minus the App ID of course, but the popup portion works:
https://codepen.io/xhynk/pen/MVKerM
I also added the version ID to the sdk.js script (https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7)
Try adding a version and the App ID to the JS SDK source:
https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>
Although, i would recommend using the asynchronous way to load the JS SDK:
https://developers.facebook.com/docs/javascript/quickstart
If you do not want to create an App, use sharer.php with a standard anchor-tag:
https://www.facebook.com/sharer/sharer.php?u=<encoded-url>
Thank you for all your answers. It works now with the following code.
I've also created a codepen for it.
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
cookie : true,
xfbml : true,
version : 'v2.7'
});
FB.AppEvents.logPageView();
};
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: window.location.href,
}, function(response){});
}

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?
To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

Icon missing: 404 Not Found on SkyDriveIcon_blue.png

My website uses the SkyDrive Javascript API to show an 'Open from SkyDrive' button (using Wl.ui).
I noticed that the icon that used to be shown is no longer showing, I get a 404 - file not found on http://js.live.net/v5.0/images/SkyDrivePicker/SkyDriveIcon_blue.png
Has anyone seen the same issue and does anyone know how to solve it?
Some snippets:
The script
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
The div for the button
<DIV ID="uploadFile_div">SkyDrive save button to appear here</DIV>
And the code for WL.ui
WL.ui({
name: "skydrivepicker",
element: "uploadFile_div",
mode: "open",
select: "single",
onselected: onPickFileCompleted,
onerror: onUploadFileError
});
The website that shows the problem is http://www.padvark.nl/index.php?page=gpxpauser
Thanks in advance,
Koen
This is actually an issue on the OneDrive side. We have a fix that should hopefully make it out soon.

How to display popup in Magento

I am developing an extension for Magento and am trying to display a popup window to the user during checkout if their data is not able to be properly validated. I am trying to avoid making my own theme or modifying the default to trigger the window to pop up.
Is there another method that I can use to trigger this from the controller? Perhaps through getLayout I can inject the javascript to open the popup and then reload the page?
I would do something like this
<div style="display:none;">
<div id="mycontent">
// your content
</div>
</div>
<button type="button" id="linktopopup" href="#mycontent">
<script type="text/javascript">
("#linktopopup").fancybox({
autoDimensions: false,
afterShow: function(){
// append something to form!
}
});
</script>

Google Chrome Extension Redirect different page

I have popup.html I want to load different html page in extension when user click href. Example user will enter username and password and if they are correct login.html redirect to content.
Tried this:
window.onload=function(){
$( '#Login' ).click(function() {
alert('test');
chrome.browserAction.setPopup({
popup:"login.html"
});
});
}
Login is a button.But login.html didnt show up. Alert is working.
To change the popup html page you can use
chrome.browserAction.setPopup
more detailes on this page http://developer.chrome.com/extensions/browserAction.html
you can do something like this:
in html:
<a onclick="changePopup();" href="#"> change popup</a>
in js:
function changePopup(){
chrome.browserAction.setPopup({
popup:"second_page.html"
});
}
You didn't specified where is the link placed? in the popup page or in an html page, so I assumed the linked is placed in popup html page.
If the link is placed outside extension, you should use Content Scripts https://developer.chrome.com/extensions/content_scripts.html
UPDATE: You should put the java-script file in your manifest.json using background pages or event pages depending on what you need.
Here you can find more info:
https://developer.chrome.com/extensions/background_pages.html
http://developer.chrome.com/extensions/event_pages.html
....
"background": {
"scripts": ["background.js"]
},
....
If you loaded the javscript file from your html page using the <script> tag , you should use the Message passing api : http://developer.chrome.com/extensions/messaging.html to interact with your html.
Try this
<button id="add-button">Go to another popup</button>

Categories