html - ASP.NET, CSS and jQuery -
i have aspx page:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>some title</title> <link href="css/home.css" rel="stylesheet" /> <script src="js/jquery.js"></script> <script src="js/dragbar.js"></script> </head> <body> <div id="content"> <div id="map"> <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.za/maps/ms?msa=0&msid=208869092274662645717.0004dd2a2065f7b179e5b&hl=en&ie=utf8&ll=-25.401819,28.721652&spn=0,0&t=m&output=embed"> </iframe> <div id="dragbar"></div> </div> <div id="main"> <asp:label id="lblerror" runat="server" text="label"></asp:label> </div> </div> this css:
#content { position: relative; height: auto; width: 1000px; margin: auto; padding-top: 150px; z-index: 2; background-color: white; border-left: 1px solid black; border-right: 1px solid black; } #content iframe { position: relative; top: 0px; left: 0px; width: 100%; height: 100px; min-height: 200px; border-bottom: 1px solid black; box-shadow: 0px 0px 10px black; } #content #main { background-color: burlywood; position: relative; width: 1000px; height: 200px; right: 0; left: 0px; z-index: 0; } #content #map { background-color: indianred; width: 1000px; height: auto; position: relative; top: 0px; bottom: 38px; overflow-y: hidden; z-index: 1; } #content #dragbar { background-color: black; position: absolute; bottom: 0px; width: 100%; height: 3px; cursor: row-resize; z-index: 1000; } and jquery:
$('#dragbar').mousedown(function (e) { e.preventdefault(); $(document).mousemove(function (e) { $('#main').css("top", e.pagey); $('#dragbar').css("bottom", 0); $('iframe').css("height", e.pagey - 10); }); }); $(document).mouseup(function (e) { $(document).unbind('mousemove'); }); my problem works on jsfiddle when type code, not working in visual studio 2012. there missing?
sorry, forgot problem. problem should resize map div , iframe inside when drag dragbar div.
my jfiddle location: http://jsfiddle.net/bebbie7/qgk5n/
the main difference between jsfiddle , visualstudio how scripts being included. first, make sure jquery being loaded correctly (paths correct etc) running script debugger or adding alert. second, try wrapping script in onready handler make sure finished loading before executing:
$( document ).ready(function() { alert("jquery working"); $('#dragbar').mousedown(function (e) { e.preventdefault(); $(document).mousemove(function (e) { $('#main').css("top", e.pagey); $('#dragbar').css("bottom", 0); $('iframe').css("height", e.pagey - 10); }); }); $(document).mouseup(function (e) { $(document).unbind('mousemove'); }); });
Comments
Post a Comment