I'm really struggling with this...
I set up a really easy window.onload shadowbox.js popup window
However, when I try to use the same exact code on a dev wordpress site I'm creating, the shadowbox popup is not loading at all and I'm not sure why... what's weird is that everything for the shadowbow.js and css are loaded extrernally from a seperate directory, but it looks like my theme is taking over for controlling elements?
http://krimsonkloverdev.malbert.me/test/
I'm REALLY stumped on this, so if some kind soul can help me out with this or steer me in the right direction I would GREATLY appreciate it.
Thanks for reading.
Try adding popup open script in footer.php file. I mean the script below.
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: 'your-content-file-url',
player: "iframe",
height: 340,
width: 540
});
};
</script>
NOTE : Make sure your change the content: url
I hope this will solve the issue.
Thanks
Related
After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
I've never done Javascript,
On the website I've added rel="shadowbox" to the posts to pull up the lightbox of the post. The template has infinity-scroll built in and I've seen that you have to use a callback to make shadowbox work on the new posts. The problem is where do I put the code and how?
Example:
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on
Do I put this in the head in a script tag?
You could include it in the head of your website if you'd like... something like this may work for you:
<script>
$(function(){
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({
// fancybox API options here 'padding': 0
}); // fancybox
});
});
</script>
If you're not so much a programmer and want a top-notch modal plugin (lightbox), I suggest checking out Easy Fancybox. It works and looks great. http://wordpress.org/extend/plugins/easy-fancybox/
Scratch that, Took Shadowbox & Easy FancyBox out completely.
Used Wordpress Built in Thickbox
Above the post added
<?php add_thickbox(); ?>
add a class
class="thickbox"
At the end of the link added because it was an iframe
?KeepThis=true&TB_iframe=true&height=400&width=600
Which I think does it's own callback (I Can't find if I put it in)
If so add the following to the header.php
<script> tb_init( $('a.thickbox, area.thickbox, input.thickbox',this) );</script>
Like I said I don't think it needs it.
Thanks for your help though.
I have an ASCX component that has a lot of javascript declared in a script tag in the ascx itself. I can set breakpoints, and the debugger stops as it should, but the text that is highlighted in the debugger as the "current line" is nowhere near the actual javascript (it is much higher in the rendered file than it should be). I can "wing it" for one or two lines with the real code side-by-side with the "false" line of execution, but I lose all the hover abilities and everything else that makes javascript debugging useful.
I have tried putting the script at the top of my ascx file, but to no avail. I've tried not setting a breakpoint until the entire page is rendered, so that I have to scroll all the way to where the actual lines of code are, and the debugger still stops somewhere way above it.
Has anyone else seen this or no how to get around it?
Please don't answer with suggestions about using a different browser. This site doesn't work except in IE7 and IE8.
Thanks!
Finally!!!
I have been looking for a solution to this question for MONTHS!
This worked for me:
<script type="text/javascript" language="javascript">
debugger
function ThrowError() {
$(function () {
$.openDOMWindow({
loader: 0,
width: 500,
height: 250,
windowSourceID: '#ErrorAlert'
});
return false;
});
}
function CloseError() {
$(function () {
$.closeDOMWindow({});
return false;
});
}
if ("False" == "True") ThrowError();
</script>
I don't know if I'm using it correctly, but it seems to give me what I need.
Thank you!!
Move the script to an external JS file.
(This is good practice anyway)
I'm dealing with the same issue as you're. I can't move the js code to an external JS (because the guy who wrote the code is using the variables of .cs with <%= var %>. The simplest solution that i've found is write debugger; wherever you want the browser to start debugging the script.
I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.
<script>
$(document).ready(function() {
$("#select_mailshot").click(function () {
alert('mailshot');
document.location.href = "/products/1";
});
$("#select_blog").click(function () {
alert('blog');
document.location.href = "/messages";
});
$("#select_contact").click(function () {
alert('contact');
document.location.href = "/contacts/1";
});
});
</script>
(the alert steps are in there for debugging)
The following html code in index.html.erb
<ul>
<li id="select_mailshot">Mailshot</li>
<li id="select_blog">Blog</li>
<li id="select_contact">Contact us</li>
</ul>
The intention is that this effectively creates 3 buttons.
When clicking on any button from http://myurl.com/ it all works.
When clicking on any button from http://myurl.com/messages (get to this via the middle button) it all works
When starting from http://myurl.com/products/1 it all stops working (the alerts do not trigger). In fact when starting from http://myurl.com/anything/id it stops working.
I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.
Can anyone shed any light as to what's going on here?
What does firebug tell you? Do you have javascript errors on the page? if so, what are they? Are you sure the jQuery library is included correctly in the deeper pages ( i.e. is it a relative path? )
Is this javascript inlined?
If not, then maybe the link is relative so when you try to load it from messages/40 you need ../script.js. Another solution is to use absolute URLs (http://myurl/script.js) or virtual (/script.js).
Thanks to cherouvim and digitaljoel.
This was due to javascript files being included relative to the current URL.
The following was included in the head tag
<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
I changed it to
<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>
(note the extra "/" in the src attribute) and everything works as expected.
I worked this out after checking the error logs on the server and in the browser.
Feeling a little dumb but a lesson well learned.
I was using FaceBox to create modal overlays and I couldn't figure out why I was having the same problem.
I turns out that the listener wasn't being attached to HTML elements until it was visible. (The items were available if I viewed source, but jQuery seemed not to attach a listener until it was visible.)
For anyone having the same problem, I'd suggest moving your click() code to a point where the HTML element you're attaching to is visible.
Also, I've found selecting by ID does give more problems than class. I have no idea why. (No, there were not duplicate IDs.)
Hope this helps someone with the same problem!