<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="jScrollPane.css" type="text/css" rel="stylesheet" >
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jScrollPane.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="abc">
</div>
</body>
</html>
test.css
#abc{
width: 300px;
height: 300px;
}
test.js
$(document).ready(function(){
$('#abc').jScrollPane();
setInterval(function(){$('#abc').append('<p>UDB</p>');},1000);
}) ;
I am trying to create a box in which contents can be added and as the box is full the content can be seen by scrollling for example a message box or notification box. But whenever i try to add jScrollPane() i cant add recursively the child by using append().
That's because jScrollPane transforms the html markup of the target element by adding 2 nested elements: jspContainer and jspPane. So you should be appending elements to the jspPane element inside #abc:
var target = $('#abc').jScrollPane();
setInterval(function()
{
target.find('.jspPane').append('<p>UDB</p>');
target.data('jsp').reinitialise();
},1000);
EDIT
Also you should call reinitialise after each append to allow jScrollPane to refresh it's dimensions to accomodate the new content. Here is a working fiddle: http://jsfiddle.net/yC5k9/
Related
Hi this is my code,
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"80%"});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
It works fine, like as lightbox pop-up . Now i need when the form display, the scroll bar should be remove, How it possible with my code?
Please help me?
try this
Set overflow: hidden; on the body tag like this:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>
I am trying to open a fancybox iframe with HTML content inside for now It is just a simple html document with text but it will eventuallly be a form however when i click to test it, it simply opens up the other HTML document. how do I make it so that it opens up the html doc in an iframe. here is my html with the includes and button link that should open up the HTML in the fancybox:
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="/js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/source/jquery.fancybox.pack.js"></script>
<script language="javascript" type="text/javascript" src="/js/source/vpb_script.js"></script>
<body>
<div id = "signup"><div><center><a class = "fancybox fancybox.iframe" href="form.html"> <img src="images/sign-up.png" width="216" height="65" /></a></center></div></div>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function() {
$(".fancybox").fancybox({
width : '70%',
height : '70%’
});
});
</script>
</body>
</html>
Please help :)
You have an incorrect single quote at the end of the height attribute. You're using some sort of weird raised comma instead of a single quote and it's causing a javascript error.
See this fiddle where I've gotten it working. http://jsfiddle.net/manishie/DRvyq/
html:
<a class="fancybox" data-fancybox-type="iframe" href="http://disney.com">Iframe</a>
javascript:
$(document).ready(function () {
$(".fancybox").fancybox({
width: '70%',
height: '70%'
});
});
I've downloaded the YUI library for the nice SimpleEditor. When installed and created a simple test. It will not display right.
this is how it should look like.
http://developer.yahoo.com/yui/examples/editor/simple_editor.html
and this is how it looks with my example:
http://ms.robertcabri.nl/testing.php
Here is the code of my testing page:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/assets/skins/sam/skin.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
var editor = new YAHOO.widget.SimpleEditor('blaat', {
dompath: true,
handleSubmit: false
});
editor.render();
};
</script>
</head>
<body>
<form action="#" method="post" id="test">
<fieldset>
<legend>test</legend>
<textarea name="blaat" id="blaat" cols="30" rows="5"></textarea>
</fieldset>
</form>
</body>
</html>
Well found the answer myself.
YUI SimpleEditor documentation is really bad. The Main styling has to be set for this element.
in my example i've set a wrapper around the textarea and then the styling picks up.
<div class="yui-skin-sam">
<textarea></textarea>
</div>
You also could place this class on a form element or on the body. It has to be a parent of the textarea node you want to replace with the simpleeditor
You need to put the "yui-skin-sam" class on your body tag, for one thing.