I am remaking the old website for my school. Please do not mind all of the css and html mess, since I'm busy doing that. Also, I'm not an expert in javascript, so...
Now, for my problem.
The website uses a Google Calendar for their events, etc. On the homepage, there is a little sidebar with the upcoming events. I'm not planning on changing this every other day, so I came across this jQuery thing that pulls the upcoming events from the calendar directly.
This is loaded on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script>
<script src="/jquery.gcal_flow.js"></script>
<script src="/jquery.popupWindow.js"></script>
This is how it looks:
<div id="gcf-custom-template">
<div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;">
<div class="gcf-title-block">
Agenda
</div>
</div>
<div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;">
<div class="gcf-item-block">
<div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;">
<div class="gcf-item-title-block">
<a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a>
<strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event
</strong>
<div style="display: block; clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
With the above stuff comes this script:
<script type="text/javascript">
$('#gcf-custom-template').gCalFlow({
calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com',
maxitem: 4,
mode: 'upcoming',
daterange_formatter: function (start_date, allday_p) {
function pad(n) { return n < 10 ? "0"+n : n; }
return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":";
}
});
</script>
Now, I'm trying to get the links that are produced in the "Item Titel Of Your Event" to open in a new tab.
I tried to use this script:
<script type="text/javascript">
$('#link').popupWindow({
height:500,
width:800,
top:50,
left:50
});
</script>
I modified the jquery.gcal_flow.js file to add 'id="link"' to the links,
but it won't work.
If I try it with another link not generated, it works just fine.
Any help would be welcome!
PS: A page with everything: http://www.sint-jozefscollege.be/calendar1.html
EDIT: the implemented solution is available at http://www.sint-jozefscollege.be
I'd say your problem is that the links haven't been generated when your script to bind the popupWindows runs. Therefore, the event never gets bound. That plugin doesn't seem to support delegated events, but you could always create the popup window manually, delegating the event by using .on().
$(function() {
$('body').on('click', '.link', function(e) {
e.preventDefault();
new_window = window.open($(this).attr('href'),'','height=500,width=800');
});
});
You'll also notice 2 things here. First, is that I put the code in the jQuery ready function. You should always put all jQuery related code in the ready function. Secondly, I used .link instead of #link. IDs should only be used once in a document, if you need to use them multiple times, use classes instead.
Related
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I have a question, which I can't ask directly, but will try to explain as much as I can, so you can help me.
The thing is next: I am making a project about some football league, and I have a sidebar which lists rounds of the competitions like this
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
It's nothing much, as I am trying to keep it simple. I will make those clickable, but I don't want them to lead me to another page, I want them just to change the part of the main container of the page.
Something just like on http://www.flashscore.com. When you click to change date, the url stays flashscore.com, but the page changes to the date that you clicked.
I know this all sounds crazy, but if you understand me, I will explain even further with whatever you need me to.
Also, I am fairly new to Javascript, but will try to incorporate it into the website I am making, as I think this is pure javascript.
Look into AJAX, that is what you will want to do in order to grab new info from a server without doing a full page postback / reload. It will be mostly JS with maybe some CSS to show / hide content. I'm on mobile so I can't give a great demo, but I'll try when I get off work.
EDIT: looks like I thought you were asking about loading new data. Should be easier than that if you just want to change content to display. I'll post more details later
Update: relevant fiddle: https://jsfiddle.net/44ka1be6/
html
<div class="wrapper">
<div class="sidebar">
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
<div>
Stuff 3
</div>
</div>
<div id="content">
Default stuff
</div>
</div>
js
$(document).ready(function() {
$('.sidebar div').click(function(e) {
$('#content').text($(this).text())
})
})
css
.sidebar, #content {
display: inline-block;
}
.sidebar div {
border: 1px solid black;
font-size: 18px;
padding: 8px 5px;
}
.wrapper {
border: 1px solid black;
}
It is very hard to answer without details, but you can make the main body of the page in an element (div for example) and write to the innerHTML when they click on a link. Depending on what you want to go in the main body, you can have it all as strings in JS, or preferably load the data through AJAX. See: https://www.w3schools.com/xml/ajax_intro.asp. They have a lot of good example code.
In case you just want to update your container with a new static content, you can just add a click event listener to your sidebar:
sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
container.innerHTML = "New content";
});
#sidebar {
float: left;
}
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
<div id="container">Content</div>
My javascript is supposed to remove a DIV from it's id when the time is past 20 hours. But it doesn't seem to work with following code.
JS:
if (new Date().getHours() > 20) {
document.getElementById("carttext").remove();
}
HTML:
<div class="block block-cart-header" style="padding: 0px;" id="carttext">
<div class="block-content" style="background: none; padding: 2px; min-height: 10px; text-align: center; background-color: #e2e2e2;">
<span style="font-size: 10px;" id="ordertext">Modtag <span id="day1"></span>, bestil før</span><br>
<b id="countdown1" style="color: black;"></b>
</div>
</div>
A possible scenario and most common mistake could be that your JavaScript is processed even before the DOM element is created, this means your JavaScript is looking for an element and removing it even before it is created (This should log an error message in console). After JS is processed, your DOM is created and so is your ElementById("carttext"). That is why you are not seeing the results you expect.
What you should do is make sure <script> tags are placed at bottom of your HTML document.
Also, log the messages of your actions in console, it will help you a lot tracing the errors.
Edit 1: The coders in comments are saying the same thing, make sure you fix that.
I know multiple post have already been posted on the similar topic, but I am yet to find a good answer on this. So, asking Gurus to help me out.
I am working on an application where I am working on JavaScript, and JSF. On page load I am calling multiple external javascript/jquery files (for multiple purposes) and they seems to work fine. However, there are couple of pages where I have some components (JSF components) that does not load initially or does not become part of the initial DOM (when page loads). However, when it load after some click event on the page (so i said content is loaded on the fly), then the new content does not get the javaScript/jquery effect.
Here's a brief example just to make my question more simple:
I have this on the page header :
.. and this on the body
<div class="panel">
<p>some sample text</p>
<p class="button">Modify</p>
</div>
(On the above code output,i get round shaped buttons for "Modify" text)
When someone clicks the modify button(link), then gets the following codes:
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
However, I do not get same rounded shape buttons anymore for "Yes" and "No". (And calling JQuery files on the bottom of the page doesn't help either).
Through JSF we are using:
<h:panelGroup render=.....>
<div class="panel">
<p>some sample text</p>
<p class="button">Modify</p>
</div>
</h:panelGroup>
<h:panelGroup render=.....>
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
</h:panelGroup>
So when the first panelGroup (JSF) gets loaded it gets what's on the header and load the javaScript and displays the buttons with the curveycorner, but when the second panel is loaded, it does not get the javascript.
One solution I have is the following:
<h:panelGroup render=.....>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
<div class="panel">
<p>Do You want to modify</p>
<p class="button">Yes</p>
<p class="button">No</p>
</div>
</h:panelGroup>
It works, but checking if there's a better option since we want to avoid calling the same javaScript file multiple times.
Added the followings after I got some comments from others -
Actually i was wrong. Curvy corner plugin is a stand alone and does not need any other javascript/jquery file except for "curvycorners.js" . Just incase if you guys stlil have doubt about it (or about my javascript knowledge), just try the following code and see how 'curvy corner" works (please download the "curvycorners.js" from http://www.curvycorners.net/ or anywhere else ..and then try my code , it's small and simple --------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* styles for the demo sub-pages */
#demo-btn {margin: 0.5in auto;border: 0px solid #fff;color: #fff; padding:5px 15px; text-align: center; background-color: #006354;
border: 1px solid #ccc; background-image: url(btn_middle_brnd.png); background-repeat: repeat-x; border-radius:10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; height:15px; width:80px; font-size:11px; font-weight:bold;}
#demo-btn a{color:#fff; text-decoration:none;}
</style>
<script type="text/javascript" src="../curvycorners.src.js"> </script>
</head>
<body>
<div id="demo-btn">
<span>Cancel</span>
</div>
</body>
</html>
I would use the complete event of the load or ajax method to apply the curvycorners plugin to elements that don't have it but need it.
$(el).load("url",function(){
$(el).find('selector').corner();
});
Added explanation:
You didn't give us any JavaScript to look at, so all we can do is assume.
The corner plugin needs a particular piece of code to apply it to elements.
$(selector).corner();
In order for it to apply to an element, the element has to exist on the page when that piece of code is ran. Since you are loading the elements in with ajax, you will need to run that code again every time you run an ajax call so that it will apply to the new elements.
This is hard to dissect without seeing the jquery files, but my guess you aren't using delegates for components that aren't loaded when the page first loads. Check out here:
http://api.jquery.com/delegate/
I have the following HTML:
<div id="panel">
<div class="listing" id="ref_1">...</div>
<div class="listing" id="ref_2">...</div>
<div class="listing" id="ref_3">...</div>
<div class="listing" id="ref_4">...</div>
</div>
What I should like to do is, when someone hovers over a div.listing, to alert() to the screen the id name.
Meaning, if a person hovers over with their mouse the id="ref_3", to alert("ref_3");
Question: How do I do this with JQuery/Javascript?
UPDATE:
Linked below is the live site. As you'll see, none of the answers below work. (Line 340)
http://tinyurl.com/ybbey4
Any recommendation?
$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});
You can see this code working here.
UPDATE
looking at your code, you might want to try this instead:
$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});
Are you currently using $ as a function in other script file, and not using noConflict
BillyJ, it sounds like you maybe aren't loading up the jQuery library in your HTML file.
Be sure to include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> in your file before calling the above function.
better yet
$('#panel div.listing').mouseover(function() {
alert($(this).attr('id'));
});
this works
<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
google.setOnLoadCallback(function() {
$('#panel div.listing').mouseover(function() {
alert($(this).attr('id'));
});
});
</script></head>
<div id="panel">
<div class="listing" id="ref_1">...</div>
<div class="listing" id="ref_2">...</div>
<div class="listing" id="ref_3">...</div>
<div class="listing" id="ref_4">...</div>
</div>
</body>
</html>
Seems to work fine separate from your site...
I'd suggest just adding a div in the code with a hslisting class. Don't use JS to inject it. See if something about the way you are injecting it is causing problems.
http://jsbin.com/agosa works just fine.
The 'mouseenter' event is usually a better choice than 'mouseover'. From
http://api.jquery.com/mouseenter/ :
"The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant."
jQuery('#panel div.listing').bind('mouseenter',function(){
alert(this.id);
return false;
});