When I embed the code provided by EventBrite to show the events that I have organized on my site, the page loads normally but then the JavaScript expands to take up the whole page.
How do I stop this from happening? I have put in my organizer ID and API key. Below is the example code provided:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="http://evbdn.eventbrite.com/s3-s3/static/js/platform/Eventbrite.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
Eventbrite({'app_key': $APP_KEY}, function(eb){
eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
document.write(eb.utils.eventList( response, eb.utils.eventListRow ));
});
});
});
</script>
This has nothing to do with the Evenbrite javascript API. The layout is determined by the markup and css styling of your page. The eventList method returns HTML, so you can put that into a specific element and style it appropriately. For example:
<head>
<script>
$(document).ready(function(){
Eventbrite({'app_key': $APP_KEY}, function(eb){
eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
var event_list_html = eb.utils.eventList( response, eb.utils.eventListRow );
$("#event-list").html(event_list_html);
});
});
});
</script>
<style>
#event-list {
width: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="event-list"></div>
</body>
Related
I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
// The click action
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name)
.parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
});
</script>
<style>
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
</style>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
OK, let´s start.
First of all, it seems that your links are outdated or broken.
https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js
is not working.
The files must be reachable.
Next point s that you are using javascript inside of style tags.
That won't work.
After your links are fixed, try it like this:
$(document).ready(function() {
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/
$('#map').usmap({
stateStyles: {fill: 'blue'},
'click': function(event, data) {
$('#clicked-state').text('You clicked:'+data.name );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
So I want to trigger an action after a click anywhere on the body, the code is:
HTML:
<body>
<div class="paper"></div>
</body>
CSS:
body{
background-color: #F5F5F5;
margin:0px;
padding:0px;}
.paper{
width: 500px;
height: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background-color: white;}
and js:
window.onload = function(){
$('body').on('click',function(){
console.log("click");
})
}
My problem is that the click is only registered when I click in our next to the div; if I click below nothing happens.
I am a bit confused by this, isn't the body the entire page? If I change the background-color of the body the entire background in the browser gets that colour, but using it with jQuery is different?
(jQuery is properly loaded and there are no error logs)
Try this:
$('html').on('click', function(){
console.log('click');
})
The proper way to achieve the desired effect, is to put your click handler on your document, like this :
$(document).on('click',function(){
console.log("click");
});
Now, also want to make sure your JavaScript code is at the very bottom of your HTML file, like this :
<html>
<head>
// header content goes here
</head>
<body>
// body content goes here
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(document).on('click',function(){
console.log("click");
});
</script>
</body>
</html>
If you can not or do not want to put your JS code at the very bottom of your HTML, you could also wrap your click handle with $(document).ready(), like this :
$(document).ready(function(){
$(document).on('click',function(){
console.log("click");
});
});
See this Fiddle for a demo.
Target document
$(window).load(function() {
$(document).on('click',function(){
console.log("click");
alert("clicked");
});
});
You have to have the on load wrapper, or you get an initial undefined for $. Can obviously be doc ready, but you have load in the original post.
try this.this will help to you
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
alert(" ");
});
});
</script>
</body>
</html>
*I suggest you to check your jquery is working.simply put an alert(" ") and check it before you go for huge one.hope this helps to you.cheers!!!
Selecting on 'body' may not be what you expect (you may want document instead), but here is the correct syntax:
$('body').on('click', 'selector', function(){
/* do something here */
})
Hi I'm using this: http://galleria.io/ to create a popup image slider.
Basically I want it to appear fixed over my page only after the user clicks a link to open it (it will not open another page). If I use "display: none" it will load in the background slowing everything down as it will contain HD images.
Right now I am trying this:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<style>
.galleria {
width: 700px;
height: 400px;
background: #000
}
</style>
<script>
</script>
</head>
<body>
Click me to load images
<script>
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
</script>
</body>
</html>
This the documentation for Galleria:
http://galleria.io/docs/getting_started/beginners_guide/
I had a real good look at this and even downloaded the galleria.js for it. Coming to the simple conclusion that your code is likely to only miss a document ready statement :
<script>
$(document).ready(function() {
function showGallery() {
var content = "<div class=\'galleria\'><img data-src=\'photo1.jpg\'><img data-src=\'photo2.jpg\'><img data-src=\'photo3.jpg\'></div>";
var hello = "hello world";
console.log("hi it's working");
$('body').append(hello);
}
$('#imageshow').click(function() {
showGallery();
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
});
});
</script>
basically I'm trying to get #toggle_box to slide down using Jquery, the code below works if I'm just using document.body as the selector however it doesn't seem to work when #toggle is the selector! Any ideas why?
<html>
<head>
<title>JQuery Testage</title>
<style>
#toggle_box {
display: none;
}
#toggle {
background-color: #FFF000;
border: solid;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
</script>
<div id="toggle">Toggle</div>
<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>
</body>
</html>
Give the click handler a $(document).ready(... wrap, and it should work:
$(document).ready(function() {
// your click handler and anything else that
// should run when the DOM is ready
});
Modify your code thus:
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
});
</script>
The problem is that the javascript is loaded and executed before the toggle_box element is loaded. It works for the document body as that is loaded before the javascript.
Could it be because the DOM isn't ready yet?
Try wrapping your script in the following piece of code:
$(function() {
// your code here
});
That's a short code for $(document).ready(function(){ ...}); and may just be what's missing?
I'm using the following code in one of my WordPress plugin files:
else if($filetype == 'swf'){
print
<<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>[kml_flashembed movie="$img" /]</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT;}
But instead of parsing the [kml_flashembed] block, it gets spit out as it is. I manually put it in my header.php file and there it rendered fine, so the problem is in the way the JavaScript is injecting it into the HTML.
Can someone shed some light on what I should change to get the tag to parse instead of getting rendered literally?
(The tag is for the WordPress Kimili Flashembed plugin.)
You can't expect PHP to replace the [kml_flashembed movie="$img" /] if you place it inside of a heredoc block
else if($filetype == 'swf'){
print <<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>
EOT;
[kml_flashembed movie="$img" /]
print <<<EOT2
</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT2;}
Try using the do_shortcode function to expand the shortcode.