Develop Reference

Problem when calling identical javascript for calendar plugin

I'm using a calendar app to connect multiple different calendars. The way they show the calendar is not really suitable for me so I've been trying to change the JavaScript but as soon as I try to call another version, even if it is exactly the same the calendar don't show, so is there some way to use my own JavaScript? I've tried contacting the creator of the app but no luck.
Working code
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='https://panel.bed-booking.com/widget/main_full.js?ver=20180768'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
Test code with javascript at http://yourjavascript.com/31631229421/main-full.js
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='http://yourjavascript.com/31631229421/main-full.js'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
working fiddle
https://jsfiddle.net/0gk6L9pr/
test fiddle
https://jsfiddle.net/xq1t6ujv/

Next time, please make your code more readable, one giant blob of code doesn't help anyone (especially yourself, because you are the one that has to work with it).
The error is in the link you provided, because it doesn't contain anything? Just compare these two:
http://yourjavascript.com/64351117249/main-full.js
https://panel.bed-booking.com/widget/main_full.js?ver=20180768
One is completely empty and the other actually has something you can use.

How to prevent k-window-titlebar from absorbing click events

Is it possible to prevent k-window-wtitlebar part of the Window class from absorbing click events?
I am inserting a form into the title of a window and find that I cannot click on any select boxes within the form, though buttons remain clickable. Is there any way to get the titlebar to let through click events but still allow the window to be dragged?
Here's a short sample that shows the problem -- the select box in the titlebar will flash a moment but then does not open. I'm not familiar enough with how Kendo is setup to figure this out easily, been bashing myself on this for a bit now. I know something is absorbing the click event and I've narrowed it down (I think) to k-window-titlebar. Any one have any ideas?
<link href="assets/ui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="assets/ui/styles/kendo.default.min.css" rel="stylesheet" />
<script src="assets/app/js/jquery.js"></script>
<script src="assets/app/js/jquery.form.min.js"></script>
<script src="assets/app/js/bootstrap.min.js"></script>
<script src="assets/app/js/bootstrap-toggle.min.js"></script>
<script src="assets/app/js/main.js"></script>
<script src="assets/ui/js/kendo.all.min.js"></script>
<style>
form {
display: inline;
}
</style>
<div class="shell">
<br><br><br><br>
<div id="window1" class="window">
<div class="client">
Test
</div>
</div>
<script>
$(document).ready(function() {
var myWindow = $("#window1");
myWindow.kendoWindow({
width: "400px",
height: "200px",
title: "Test window",
iframe: true,
visible: true,
actions: [
"Maximize",
"Close"
]
}).data("kendoWindow").center().open();
var $win = $('#window1');
console.log($win);
var $parent = $win.parent('.k-window');
console.log($parent);
var $title = $parent.find('.k-window-title');
console.log($title);
$title.append($('<form><select><option>one</option><option>two</option></select><button>test</button></form>'));
});
</script>
</div>

jQuery/CSS - Change IFRAME Height when click on button inside the iframe content

I'm working on a simple HTML/jQuery script.
Right now when i click on the button which is inside the iframe it is changing the iframe's height that is calling the content with the button.
Take a look at the code:
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the iframe.php content:
<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<div style="display:block;height:300px;">
<h3>The iframe content</h3>
<button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button>
</div>
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
})
</script>
The problem is coming when i try to add this:
<style>
#outerdiv
{
width:400px;
height:300px;
overflow:hidden;
position:relative;
border:2px solid #fff;
}
#inneriframe
{
position:absolute;
width:400px;
height:700px;
border:0px;
}
</style>
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
As you can see i've added a <style> tag where i added CSS for the elements outerdiv and the iframe inerriframe and now when i click on the button it's not chaning the iframe's height.
When i remove the <style>....</style> tags and all the content inside them the script is starting to work again.
Here is the demo: http://beta.sportsdirect.bg/test/
This is the working demo when i have not added the <style></style> tags.
Can you help me set up the CSS for these elements and make the jQuery script works as well ?
Thanks in advance!

The event will not trigger it's function when the document is not fully loaded inside the iframe page.
Instead of:
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function(){
$("#SuperWebF1").on('click',function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
});
</script>
For it to listen to the click event when all the .css,.js and whole documents in the page are completely ready.
I hope this will help?

jQuery slideToggle more than one panel

Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>

If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>

#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This

Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.

I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/

How to create a popup box where users can copy text?

In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.

You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.

with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});

I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle

create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}

you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>