I want to show a print preview, so I chose to use this plugin.
I have added it to my code:
<%# Page language="c#" AutoEventWireup="false" Inherits="System.Web.UI.Page" %>
<%# Register TagPrefix="CP" TagName="TitleBar" Src="WebUserControl.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>MyPage</title>
<link href="css/print-preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script src="jquery.print-preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
/*
* Initialise print preview plugin
*/
// Add link for print preview and intialise
$('#aside').prepend('<a class="print-preview">Print this page</a>');
$('a.print-preview').printPreview();
// Add keybinding (not recommended for production use)
$(document).bind('keydown', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 80 && !$('#print-modal').length) {
$.printPreview.loadPrintPreview();
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<CP:TitleBar Title="User Control Test" TextColor="green" Padding="10" runat="server" />
<div id="aside"></div>
</form>
</body>
</html>
In UserControl I did this:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
<p>Not loaded yet.</p>
<table>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
Problem is, when I add the script in UserControl, the Print-Preview-Plugin is not working.
When I remove the script from the UserControl the print-preview-plugin works fine.
My question is, why is the plugin not working when I add script to the UserControl? How should I call the Print Preview Plugin file code?
/*!
* jQuery Print Previw Plugin v1.0.1
*
* Copyright 2011, Tim Connell
* Licensed under the GPL Version 2 license
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Date: Wed Jan 25 00:00:00 2012 -000
*/
(function($) {
// Initialization
$.fn.printPreview = function() {
this.each(function() {
$(this).bind('click', function(e) {
e.preventDefault();
if (!$('#print-modal').length) {
$.printPreview.loadPrintPreview();
}
});
});
return this;
};
// Private functions
var mask, size, print_modal, print_controls;
$.printPreview = {
loadPrintPreview: function() {
// Declare DOM objects
print_modal = $('<div id="print-modal"></div>');
print_controls = $('<div id="print-modal-controls">' +
'Print page' +
'Close').hide();
var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');
// Raise print preview window from the dead, zooooooombies
print_modal
.hide()
.append(print_controls)
.append(print_frame)
.appendTo('body');
// The frame lives
for (var i=0; i < window.frames.length; i++) {
if (window.frames[i].name == "print-frame") {
var print_frame_ref = window.frames[i].document;
break;
}
}
print_frame_ref.open();
print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
'<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' +
'<head><title>' + document.title + '</title></head>' +
'<body></body>' +
'</html>');
print_frame_ref.close();
// Grab contents and apply stylesheet
var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
$iframe_body = $('body > *:not(#print-modal):not(script)').clone();
$iframe_head.each(function() {
$(this).attr('media', 'all');
});
if (!$.browser.msie && !($.browser.version < 7) ) {
$('head', print_frame_ref).append($iframe_head);
$('body', print_frame_ref).append($iframe_body);
}
else {
$('body > *:not(#print-modal):not(script)').clone().each(function() {
$('body', print_frame_ref).append(this.outerHTML);
});
$('head link[media*=print], head link[media=all]').each(function() {
$('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
});
}
// Disable all links
$('a', print_frame_ref).bind('click.printPreview', function(e) {
e.preventDefault();
});
// Introduce print styles
$('head').append('<style type="text/css">' +
'#media print {' +
'/* -- Print Preview --*/' +
'#print-modal-mask,' +
'#print-modal {' +
'display: none !important;' +
'}' +
'}' +
'</style>'
);
// Load mask
$.printPreview.loadMask();
// Disable scrolling
$('body').css({overflowY: 'hidden', height: '100%'});
$('img', print_frame_ref).load(function() {
print_frame.height($('body', print_frame.contents())[0].scrollHeight);
});
// Position modal
starting_position = $(window).height() + $(window).scrollTop();
var css = {
top: starting_position,
height: '100%',
overflowY: 'auto',
zIndex: 10000,
display: 'block'
}
print_modal
.css(css)
.animate({ top: $(window).scrollTop()}, 400, 'linear', function() {
print_controls.fadeIn('slow').focus();
});
print_frame.height($('body', print_frame.contents())[0].scrollHeight);
// Bind closure
$('a', print_controls).bind('click', function(e) {
e.preventDefault();
if ($(this).hasClass('print')) { window.print(); }
else { $.printPreview.distroyPrintPreview(); }
});
},
distroyPrintPreview: function() {
print_controls.fadeOut(100);
print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){
print_modal.remove();
$('body').css({overflowY: 'auto', height: 'auto'});
});
mask.fadeOut('slow', function() {
mask.remove();
});
$(document).unbind("keydown.printPreview.mask");
mask.unbind("click.printPreview.mask");
$(window).unbind("resize.printPreview.mask");
},
/* -- Mask Functions --*/
loadMask: function() {
size = $.printPreview.sizeUpMask();
mask = $('<div id="print-modal-mask" />').appendTo($('body'));
mask.css({
position: 'absolute',
top: 0,
left: 0,
width: size[0],
height: size[1],
display: 'none',
opacity: 0,
zIndex: 9999,
backgroundColor: '#000'
});
mask.css({display: 'block'}).fadeTo('400', 0.75);
$(window).bind("resize..printPreview.mask", function() {
$.printPreview.updateMaskSize();
});
mask.bind("click.printPreview.mask", function(e) {
$.printPreview.distroyPrintPreview();
});
$(document).bind("keydown.printPreview.mask", function(e) {
if (e.keyCode == 27) { $.printPreview.distroyPrintPreview(); }
});
},
sizeUpMask: function() {
if ($.browser.msie) {
// if there are no scrollbars then use window.height
var d = $(document).height(), w = $(window).height();
return [
window.innerWidth || // ie7+
document.documentElement.clientWidth || // ie6
document.body.clientWidth, // ie6 quirks mode
d - w < 20 ? w : d
];
} else { return [$(document).width(), $(document).height()]; }
},
updateMaskSize: function() {
var size = $.printPreview.sizeUpMask();
mask.css({width: size[0], height: size[1]});
}
}
})(jQuery);
$('a.print-preview').printPreview() really is not a function, because it doesn't have such.
Try something like:
$('a.print-preview').onClick(printPreview);
Related
I'm trying to delay creation of each div by 1 sec to no avail, Can't figure out how to use setTimeout or setInterval, any help appreciated.
(also, would like to position divs centered relative to each other).
I'm trying to draw series of them of decreasing sizes, in each other.
Any advice appreciated
var i;
var w = 400;
var delay = 3000;
$(function () {
$("#boom").click(function () {
for (w, i = 0; w >= 20; i++, w = w - 20) {
$('body').append('<div id="div' + i + '" />'); {
if (i % 2 === 0) {
$("#div" + i + "").css({
"background-color": "gold",
"position": "absolute",
"z-index": i,
"top": "20vw",
"left": "20vw",
}).width(w).height(w);
} else {
$("#div" + i + "").css({
"background-color": "chartreuse",
"position": "absolute",
"z-index": i,
"top": "20vw",
"left": "20vw",
}).width(w).height(w);
}
}
}
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kwadrat w kwadracie</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="boom">Vamos!</button>
<div id="outer"></div>
</body>
</html>
I'm not sure if I exactly understood what is your desired result, but I think this is what you are trying to achieve:
const outerDiv = document.getElementById('outer'),
sizeDecrement = 20;
document.getElementById('boom').addEventListener('click', event => {
let lastDiv = outerDiv,
size = 400;
const interval = setInterval(() => {
const div = document.createElement('div');
div.className = 'inner ' + (size % (2 * sizeDecrement) === 0 ? 'even' : 'odd');
[div.style.height, div.style.width] = [size + 'px', size + 'px'];
lastDiv.append(div);
lastDiv = div;
size -= sizeDecrement;
if (size < sizeDecrement) {
clearInterval(interval);
}
}, 500);
});
.inner {
align-items: center;
display: flex;
justify-content: center;
}
.inner.odd {
background-color: chartreuse;
}
.inner.even {
background-color: gold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kwadrat w kwadracie</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="boom">Vamos!</button>
<div id="outer"></div>
</body>
</html>
Also, regarding your code: $(function () { is unnecessary, and so is using such an amount of per-div styling instead of creating a class and giving it those styles in style sheet.
See following snippet. I hope it will help
var i = 0;
var w = 400;
var delay = 500;
$(function () {
$("#boom").click(myLoop);
});
function myLoop () {
setTimeout(function () {
$( i === 0 ? 'body' : '#div'+(i-1)).append('<div id="div' + i + '" />');
$("#div" + i + "").css({
"background-color": i % 2 === 0 ? "gold" : "chartreuse",
"position": "relative",
"z-index": i,
"top": i === 0 ? "20vw": "10px",
"left": i === 0 ? "20vw": "10px",
}).width(w).height(w);
i++;
w = w - 20
if (w >= 20) {
myLoop();
}
}, delay)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boom">Vamos!</button>
<div id="outer"></div>
See fiddle also
I want to use datagrid to show some json data, And for some other reason I used the method 'loadData' to load the fetched json. It seems that the json has been fetched successfully (the browser alert correctly )but the following code can't work and the table(#dg) is blank.
#(category:String)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title id="category">#category</title>
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("themes/default/easyui.css")">
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("themes/icon.css")">
<style type="text/css">
body {
margin: 0px;
}
a {
color: #21759b;
text-decoration: none;
}
a:hover {
color: #0f3647;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="#routes.Assets.at("js/jquery.easyui.min.js")"></script>
<script type="text/javascript" src="#routes.Assets.at("js/datagrid-scrollview.js")"></script>
#*<script type="text/javascript" src="#routes.Assets.at(js/jquery.flot.min.js)"></script>*#
#*<script type="text/javascript" src="#routes.Assets.at(js/jquery.flot.time.min.js)"></script>*#
<script type="text/javascript" src="#routes.Assets.at("js/jquery.mousewheel.min.js")"></script>
<script type="text/javascript">
var field; //当前排序字段
var rows; //数据
var scrollLeft = 0; //横向滚动条位置，可恢复
var scrollEvent = function(e) { //滚动条事件
scrollLeft = $(this).scrollLeft();
};
//阻止连带滚动外部窗口
var preventScrollParent = function(e, d) {
var t = $(this);
if (d > 0 && t.scrollTop() <= 0) {
e.preventDefault();
} else {
if (d < 0 && (t.scrollTop() >= t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
}
};
$(function () {
// if ( parent.location.hostname != self.location.hostname ) {
// self.location = "/nopermission.html" ;
// }
field = "commentnum" ;
$("#dg").width($(self).width())
.height($(self).height())
.datagrid({
url: "http://localhost:9000/json/"+ $("#category" ).text() + "/" + field,
method:"GET",
loadMsg : 'Loading',
view : scrollview,
pageSize : 50,
autoRowHeight : false,
rownumbers : true,
singleSelect : true,
border : false,
striped : true,
onLoadSuccess : loadFinish,
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'名字',width:400},
{field:'url',title:'访问购买',width:220,align:'right'},
// {field:'imgsrc',title:'图片',width:100,align:'right'},
{field:'price',title:'价格',width:60,align:'right'},
{field:'commentnum',title:'评论数',width:60,align:'right'},
{field:'likerate',title:'好评率',width:60,align:'right'},
{field:'category',title:'品类',width:60,align:'right'}
]]
}) ;
setTimeout(loaddata, 50);
});
//加载某列排序的数据
function loaddata() {
$("#dg").datagrid("loading");
$.getJSON("http://localhost:9000/json/"+ $("#category" ).text() + "/" + field, {}, function(result) {
rows = result.rows;
$("#dg").datagrid('loadData', rows);
});
}
//加载完成后处理
function loadFinish() {
$("#dg").datagrid("loaded");
$(".datagrid-view2 .datagrid-body").scrollLeft(scrollLeft);
$(".datagrid-header-row>td").css("font-weight", "normal");
$(".datagrid-header-row>td[field='" + field + "'").css("font-weight", "bold");
$(".datagrid-header-row>td").click(function() {
clickTitle($(this));
});
$(".datagrid-row a").click(function(e) {
e.stopPropagation();
})
$(".datagrid-view2 .datagrid-body").scroll(scrollEvent);
$(".datagrid-view2 .datagrid-body").bind('mousewheel', preventScrollParent);
}
//标题点击排序事件
function clickTitle(title) {
if (title.attr("field") && title.attr("field") != field && (title.attr("field") == "price"||title.attr("field")=="likerate"||title.attr("field")=="commentnum")) {
scrollLeft = $(".datagrid-view2 .datagrid-body").scrollLeft();
field = title.attr("field");
$(".datagrid-view2 .datagrid-body").unbind("scroll", scrollEvent);
$(".datagrid-view2 .datagrid-body").unbind('mousewheel', preventScrollParent);
loaddata();
}
}
//当前排序列加粗
function cellStyle(colname) {
return function(value, row, index) {
if (colname == field) return 'font-weight:bold;';
else return '';
}
}
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>
I want that my iframe is in the center of my div box right now, but I want it that that iframe goes in the center hope you guys can help me that I can that iframe in the middle of that white box.
game1.html:
<html>
<head>
<title>Racegame</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script type="text/javascript" src="js/initresize.js" ></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<script>
function showhide()
{
var div = document.getElementById("codebox");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
<script>
function resizeanshow()
{
showhide();
}
</script>
<div id="wrapper">
<nav id="nav">
<a href="index.html#work" class="icon fa fa-arrow-circle-left"style=color:red><span>Terug</span></a>
</nav>
<div id="main">
<article id="work" class="panel">
<header><h2></h2></header>
<p></p>
<div class="row">
<div class="4u">
<img src="games/racegame/foto/fotozonder.PNG" alt="">
</div>
<div class="8u">
<header>
<h1><strong>Racegame</strong></h1>
</header>
<p>Spel gemaakt in unity.<br> probeer zo snel mogelijk de finish te halen.</p>
</div>
<p>Probeer zo snel mogelijk de finish te halen. Op het circuit heb je een paar obstakels.Deze kan je ontwijken. door de highscores kan je tegen je vrienden racen.De code die gebruikt is kunt u onderaan de pagina vinden.</p>
<video width="320" height="240" controls="controls">
<source src="games/racegame/filmpje/racegamefilmpje.mp4" type="video/mp4"/>
</video>
<div>
Controls<br>
WASD = sturen<br>
Spatiebalk = remmen
</div>
<iframe src="https://c94f7e475c7659ee4ccbf6cdc7964f3cb25bec69.googledrive.com/host/0BzR73x5dCHdZenhLMVUtUEJLSlE/racegame.html" width="960" height="650" scrolling="no" ></iframe>
</div>
<button id="bodyresize">Bekijk hier de code voor de auto</button>
<div id="codebox" style="display:none">
<p><!-- //code hier//code hier --></p>
</div>
</article>
</div>
<div id="footer">
<ul class="copyright">
<li>© Sander Gouman All rights reserved. </li>
</ul>
</div>
</div>
initresize.js
/*
Astral by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
function showhide()
{
var div = document.getElementById("codebox");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
(function($) {
/* Settings */
var settings = {
// Speed to resize panel.
resizeSpeed: 600,
// Speed to fade in/out.
fadeSpeed: 300,
// Size factor.
sizeFactor: 11.5,
// Minimum point size.
sizeMin: 15,
// Maximum point size.
sizeMax: 15
};
/* skel */
skel.init({
reset: 'full',
pollOnce: true,
breakpoints: {
'global': { range: '*', href: 'css/style.css' },
'desktop': { range: '737-', href: 'css/style-desktop.css', containers: 1200, grid: { gutters: 25 }, viewport: { width: 1080, scalable: false } },
'mobile': { range: '-736', href: 'css/style-mobile.css', containers: '100%!', grid: { collapse: true, gutters: 15 }, viewport: { scalable: false } }
}
});
/* Main */
var $window = $(window);
$window.on('load', function() {
var $body = $('body'),
$main = $('#main'),
$panels = $main.find('.panel'),
$hbw = $('html,body,window'),
$footer = $('#footer'),
$wrapper = $('#wrapper'),
$nav = $('#nav'), $nav_links = $nav.find('a'),
$jumplinks = $('.jumplink'),
$form = $('form'),
panels = [],
activePanelId = null,
firstPanelId = null,
isLocked = false,
hash = window.location.hash.substring(1);
if (skel.vars.isTouch) {
settings.fadeSpeed = 0;
settings.resizeSpeed = 0;
$nav_links.find('span').remove();
}
if (skel.isActive('desktop')) {
// Body.
$body._resize = function() {
var factor = ($window.width() * $window.height()) / (1440 * 900);
$body.css('font-size', Math.min(Math.max(Math.floor(factor * settings.sizeFactor), settings.sizeMin), settings.sizeMax) + 'pt');
$main.height(panels[activePanelId].outerHeight());
$body._reposition();
};
$body._reposition = function() {
if (skel.vars.isTouch && (window.orientation == 0 || window.orientation == 180))
$wrapper.css('padding-top', Math.max((($window.height() - (panels[activePanelId].outerHeight() + $footer.outerHeight())) / 2) - $nav.height(), 30) + 'px');
else
$wrapper.css('padding-top', ((($window.height() - panels[firstPanelId].height()) / 2) - $nav.height()) + 'px');
};
////test
// document.getElementById('bodyresize').onclick = function()
// document.getElementById('bodyresize').onclick = function()
document.getElementById('bodyresize').onclick = function()
{
showhide();
var factor = ($window.width() * $window.height()) / (1440 * 900);
$body.css('font-size', Math.min(Math.max(Math.floor(factor * settings.sizeFactor), settings.sizeMin), settings.sizeMax) + 'pt');
$main.height(panels[activePanelId].outerHeight());
$body._reposition2();
};
$body._reposition2 = function() {
if (skel.vars.isTouch && (window.orientation == 0 || window.orientation == 180))
$wrapper.css('padding-top', Math.max((($window.height() - (panels[activePanelId].outerHeight() + $footer.outerHeight())) / 2) - $nav.height(), 30) + 'px');
else
$wrapper.css('padding-top', ((($window.height() - panels[firstPanelId].height()) / 2) - $nav.height()) + 'px');
};
////test
// Panels.
$panels.each(function(i) {
var t = $(this), id = t.attr('id');
panels[id] = t;
if (i == 0) {
firstPanelId = id;
activePanelId = id;
}
else
t.hide();
t._activate = function(instant) {
// Check lock state and determine whether we're already at the target.
if (isLocked
|| activePanelId == id)
return false;
// Lock.
isLocked = true;
// Change nav link (if it exists).
$nav_links.removeClass('active');
$nav_links.filter('[href="#' + id + '"]').addClass('active');
// Change hash.
if (i == 0)
window.location.hash = '#';
else
window.location.hash = '#' + id;
// Add bottom padding.
var x = parseInt($wrapper.css('padding-top')) +
panels[id].outerHeight() +
$nav.outerHeight() +
$footer.outerHeight();
if (x > $window.height())
$wrapper.addClass('tall');
else
$wrapper.removeClass('tall');
// Fade out active panel.
$footer.fadeTo(settings.fadeSpeed, 0.0001);
panels[activePanelId].fadeOut(instant ? 0 : settings.fadeSpeed, function() {
// Set new active.
activePanelId = id;
// Force scroll to top.
$hbw.animate({
scrollTop: 0
}, settings.resizeSpeed, 'swing');
// Reposition.
$body._reposition();
// Resize main to height of new panel.
$main.animate({
height: panels[activePanelId].outerHeight()
}, instant ? 0 : settings.resizeSpeed, 'swing', function() {
// Fade in new active panel.
$footer.fadeTo(instant ? 0 : settings.fadeSpeed, 1.0);
panels[activePanelId].fadeIn(instant ? 0 : settings.fadeSpeed, function() {
// Unlock.
isLocked = false;
});
});
});
};
});
// Nav + Jumplinks.
$nav_links.add($jumplinks).click(function(e) {
var t = $(this), href = t.attr('href'), id;
if (href.substring(0,1) == '#') {
e.preventDefault();
e.stopPropagation();
id = href.substring(1);
if (id in panels)
panels[id]._activate();
}
});
// Window.
$window
.resize(function() {
if (!isLocked)
$body._resize();
});
if (skel.vars.IEVersion < 9)
$window
.on('resize', function() {
$wrapper.css('min-height', $window.height());
});
// Forms (IE<10).
if ($form.length > 0) {
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// CSS polyfills (IE<9).
if (skel.vars.IEVersion < 9)
$(':last-child').addClass('last-child');
// Init.
$window
.trigger('resize');
if (hash && hash in panels)
panels[hash]._activate(true);
$wrapper.fadeTo(400, 1.0);
}
});
})(jQuery);
First you need to drop about 150px from your width, like so:
<iframe src="https://c94f7e475c7659ee4ccbf6cdc7964f3cb25bec69.googledrive.com/host/0BzR73x5dCHdZenhLMVUtUEJLSlE/racegame.html" width="810" height="650" scrolling="no" >
It might be centered at this point, but if it isn't just apply margin: 0 auto; to the style.
Edit:
If for some reson you want to ignore the padding on the left, you could apply margin-left: -75px
Note: these numbers are estimates based on the image you provided.
Edit 2:
Change the width of the panel class from 45em to 51.5em, disregard previous changes. Also change the #wrapper width from 45em to 51.5em
With 100% for both width and height, your iframe should fill the whole div content. Now if you add padding around, be sure to set box-sizing: border-box on your iframe so the padding is not added to the dimensions, but part of it. See example below.
If your case is different please create a snippet (or jsfiddle) that only shows your issue, we don't want your whole website code in a jsfiddle.
body { background: #ddd; }
.container {
background: orange;
width: 200px;
height: 250px;
margin: 20px;
}
iframe {
width: 100%;
height: 100%;
border: 0;
padding: 10px;
box-sizing: border-box;
}
<div class="container">
<iframe src="http://jsfiddle.net/"></iframe>
</div>
On this page I find effect that I like and try to put it on my site but after six hour googling still nothing
http://terranea.demos.sabrehospitality.com/
So when you clik on "guide" in navigation footer slide up.
#IndexGuide{
position:relative;
width:100%;
z-index:98;
background:#fff;
}
is my div CSS and with this function I get result but with no animation like on that page
function GuideSlide(){
$('#IndexGuide').css({
'position': 'absolute',
'top': '80px',
'z-index': '100'
});
};
I look in their page source and they do something like this
$('#guide-toggle').click(function () {
$(this).toggleClass('active');
$('#guide-close').toggleClass('visible');
$('#work-cont').slideToggle();
$('#myModal2 .close').click();
if ($(this).hasClass('active')) {
currentOffset = $(document).scrollTop();
scrollPageTo(0);
} else {
scrollPageTo(currentOffset);
}
if($('#masthead,#myCarousel').length>0) {
$('#masthead,#myCarousel').slideToggle();
}
return false;
});
I try to modify but with no result.
Here is script that worked in all browsers for me!
$(document).ready(function() {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
if(flag == 'up'){
$("#IndexGuide").animate({"top": "80px"}, 1000);
flag = 'down';
}
else {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").animate({top:newPosition}, 1000, function(){});
flag = 'up';
}
};
try this check fiddle
<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>
js
var flag = "up";
$(".open-modal").click(function(){
if(flag == "up"){
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {
});
flag = 'down';
} else {
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {
});
flag = 'up';
}
})
reference https://stackoverflow.com/a/15626812/1699833
Do it with animate(). Something like this
$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
// after animation stuff
});
You could also do it without edit the position to absolute and set a negative margin-top.
Refer this link http://api.jquery.com/toggle/
I hope The following simple example will give you the solution as you expected. The following example is got from the link http://api.jquery.com/toggle/. I've copied the code so that you no need to search through the website.
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p { background: #dad; font-weight: bold; font-size: 16px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function()
{
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>
I have a box with text within that scrolling up like the old known marquee tag.
I am using the jquery scrollbox that I found on this website:
http://wmh.github.io/jquery-scrollbox/
now, in my css file I want to replace the ul & il tags with classes, say: .list_wrapper would be instead of ul, and .list would be instead of li, so far so good...
after modifying the css, the scroller stopped to work, i found that i need to modify the "jquery.scrollbox.js" file too, but my knowledge in js is basic.
my page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.scrollbox.js" type="text/javascript"></script>
<style type="text/css">
#marquee {
height: 180px;
overflow: hidden;
margin: 0;
}
#marquee .list_wrapper {
width: 165px;
line-height: 25px;
list-style-type: none;
padding: 5;
margin: 0;
overflow: hidden;
}
#marquee .list {
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function () {
$('#marquee').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 65
});
});
</script>
</head>
<body>
<div id="marquee">
<div class="list_wrapper">
<div class="list">• text 1</div>
<div class="list">• text 2</div>
<div class="list">• text 3</div>
<div class="list">• text 4</div>
<div class="list">• text 5</div>
<div class="list">• text 6</div>
</div>
</body>
</html>
heres ths js file (I think there's something to do with the "('ul:first-child') and ('li:first-child'):
/*!
* jQuery Scrollbox
* (c) 2009-2013 Hunter Wu <hunter.wu#gmail.com>
* MIT Licensed.
*
* http://github.com/wmh/jquery-scrollbox
*/
(function($) {
$.fn.scrollbox = function(config) {
//default config
var defConfig = {
linear: false, // Scroll method
startDelay: 2, // Start delay (in seconds)
delay: 3, // Delay after each scroll event (in seconds)
step: 5, // Distance of each single step (in pixels)
speed: 32, // Delay after each single step (in milliseconds)
switchItems: 1, // Items to switch after each scroll event
direction: 'vertical',
distance: 'auto',
autoPlay: true,
onMouseOverPause: true,
paused: false,
queue: null
};
config = $.extend(defConfig, config);
config.scrollOffset = config.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
if (config.queue) {
config.queue = $('#' + config.queue);
}
return this.each(function() {
var container = $(this),
containerUL,
scrollingId = null,
nextScrollId = null,
paused = false,
backward,
forward,
resetClock,
scrollForward,
scrollBackward;
if (config.onMouseOverPause) {
container.bind('mouseover', function() { paused = true; });
container.bind('mouseout', function() { paused = false; });
}
containerUL = container.children('ul:first-child');
scrollForward = function() {
if (paused) {
return;
}
var curLi,
i,
newScrollOffset,
scrollDistance,
theStep;
curLi = containerUL.children('li:first-child');
scrollDistance = config.distance !== 'auto' ? config.distance :
config.direction === 'vertical' ? curLi.height() : curLi.width();
// offset
if (!config.linear) {
theStep = Math.max(3, parseInt((scrollDistance - container[0][config.scrollOffset]) * 0.3, 10));
newScrollOffset = Math.min(container[0][config.scrollOffset] + theStep, scrollDistance);
} else {
newScrollOffset = Math.min(container[0][config.scrollOffset] + config.step, scrollDistance);
}
container[0][config.scrollOffset] = newScrollOffset;
if (newScrollOffset >= scrollDistance) {
for (i = 0; i < config.switchItems; i++) {
if (config.queue && config.queue.hasChildNodes() && config.queue.getElementsByTagName('li').length > 0) {
containerUL.append(config.queue.getElementsByTagName('li')[0]);
containerUL.remove(containerUL.children('li:first-child'));
} else {
containerUL.append(containerUL.children('li:first-child'));
}
}
container[0][config.scrollOffset] = 0;
clearInterval(scrollingId);
if (config.autoPlay) {
nextScrollId = setTimeout(forward, config.delay * 1000);
}
}
};
// Backward
// 1. If forwarding, then reverse
// 2. If stoping, then backward once
scrollBackward = function() {
if (paused) {
return;
}
var curLi,
i,
liLen,
newScrollOffset,
scrollDistance,
theStep;
// init
if (container[0][config.scrollOffset] === 0) {
liLen = containerUL.children('li').length;
for (i = 0; i < config.switchItems; i++) {
containerUL.children('li:last-child').insertBefore(containerUL.children('li:first-child'));
}
curLi = container.children('li:first-child');
scrollDistance = config.distance !== 'auto' ?
config.distance :
config.direction === 'vertical' ? curLi.height() : curLi.width();
container[0][config.scrollOffset] = scrollDistance;
}
// new offset
if (!config.linear) {
theStep = Math.max(3, parseInt(container[0][config.scrollOffset] * 0.3, 10));
newScrollOffset = Math.max(container[0][config.scrollOffset] - theStep, 0);
} else {
newScrollOffset = Math.max(container[0][config.scrollOffset] - config.step, 0);
}
container[0][config.scrollOffset] = newScrollOffset;
if (newScrollOffset === 0) {
clearInterval(scrollingId);
if (config.autoPlay) {
nextScrollId = setTimeout(forward, config.delay * 1000);
}
}
};
forward = function() {
clearInterval(scrollingId);
scrollingId = setInterval(scrollForward, config.speed);
};
backward = function() {
clearInterval(scrollingId);
scrollingId = setInterval(scrollBackward, config.speed);
};
resetClock = function(delay) {
config.delay = delay || config.delay;
clearTimeout(nextScrollId);
if (config.autoPlay) {
nextScrollId = setTimeout(forward, config.delay * 1000);
}
};
if (config.autoPlay) {
nextScrollId = setTimeout(forward, config.startDelay * 1000);
}
// bind events for container
container.bind('resetClock', function(delay) { resetClock(delay); });
container.bind('forward', function() { clearTimeout(nextScrollId); forward(); });
container.bind('backward', function() { clearTimeout(nextScrollId); backward(); });
container.bind('speedUp', function(speed) {
if (typeof speed === 'undefined') {
speed = Math.max(1, parseInt(config.speed / 2, 10));
}
config.speed = speed;
});
container.bind('speedDown', function(speed) {
if (typeof speed === 'undefined') {
speed = config.speed * 2;
}
config.speed = speed;
});
});
};
}(jQuery));
thank you!
open jquery-scrollbox.js and try to change by the hand (not automatically) all ul&li tag on div tag