I'm creating a site where I need to overlay the Leaflet map with a DIV, which has an error message.
What happens is that the Leaflet map is always above the DIV with the error message.
I tried several ways without a result.
Can anyone help me?
HTML Code:
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="estilos/styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="..." crossorigin=""/>
</head>
<body class="hero-image">
<main class="conteudo">
<div class="centro">
<!-- Conteúdo -->
<br/>
<!-- ---------------------------------- -->
<!-- MAP ----------------------------- -->
<div class="esquerda">
<div id="map"></div>
</div>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="..." crossorigin=""></script>
<script src="js/mapa.js"></script>
<!-- MAP ----------------------------- -->
<!-- ---------------------------------- -->
<br/>
<!-- Conteúdo -->
</div>
<!-- ---------------------------------- -->
<!-- DIV ---------- -->
<div id="mensagem_informativa" name="mensagem_informativa" class="mensagem_informativa mensagem_informativa_lat_long">
<div class="mensagem_informativa_titulo">
<img src="imagens/icon-close.png" width="20px" onclick="javascript:btn_fechar();"/>
</div>
<br/>
The coordinates entered on the map do not belong to a property registered in this system.
<br/><br/>
<input type="button" value="Fechar" class="botao_fechar" onclick="javascript:btn_fechar();">
</div>
<!-- DIV ---------- -->
<!-- ---------------------------------- -->
</main>
</body>
</html>
CSS Code:
https://drsolutions.com.br/allmaps/estilos/styles.css
Regards,
Diego
Increase the z-index of div#mensagem_informativa or one of the related class styles. When I change the z-index of div.mensagem_informativa_lat_long from 99 to 400, this is what I see:
Related
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
I could not find any already asked questions relating to my problem.
Also, I'm new (again) to MVC structure as I took a long hiatus.
Anyhow, I created a new layout file _Layoutwithtop.cshtml. The Index.cshtml adopts the layout just fine, although About.cshtml and Contact.cshtml do not.
I will need all future View files to inherit _Layoutwithtop. Here are my attached files. Yes, I have included #Layout = "~/Views/Shared/_Layoutwithtop.cshtml"; line in the About and Contact Page.
Thanks.
_Layoutwithtop.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta charset="UTF-8">
<meta content="Great Lakes Imaging carries new and pre-owned radiology and x-ray imaging equipment for Chiropractors, Medical offices and Veterinary clinics. Offering a wide variety of top brands in the industry, we help you find the right equipment for your practice." name="description">
<meta content="Kodak POC 140, AGFA CR 30X, Bennett, HCMI, digital x-ray, film processor, x-ray parts, xray accessories, technique chart, radiation, xray equipment, xray companies" name="keywords">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/Site.css" rel="stylesheet">
<link href="Content/animate.min.css" rel="stylesheet">
<link href="Content/assets/icons/icons.css" rel="stylesheet">
<link href="Content/owl.theme.css" rel="stylesheet">
<link href="Content/owl.carousel.css" rel="stylesheet">
<link href="Content/nivo-lightbox.css" rel="stylesheet">
<link href="Content/nivo_themes/default/default.css" rel="stylesheet">
<link href="Content/styles.css" rel="stylesheet">
<link href="Content/responsive.css" rel="stylesheet">
<link href="Content/colors/blue.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
</head>
<body>
<div class="preloader">
<div class="status"></div>
</div>
<div>
#RenderBody()
</div>
<!-- footer -->
#Html.Partial("_footer")
<!-- / footer -->
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<!-- scripts -->
<script src="Scripts/jquery.min.js"></script>
<script>jQuery(window).load(function(){"use strict";jQuery(".status").fadeOut(),jQuery(".preloader").delay(1e3).fadeOut("slow")})</script>
<script src="Scripts/smoothscroll.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.nav.js"></script>
<script src="Scripts/wow.min.js"></script>
<script src="Scripts/nivo-lightbox.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>
<script src="Scripts/jquery.stellar.min.js"></script>
<script src="Scripts/jquery.ajaxchimp.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="Scripts/custom.js"></script>
<!-- / scripts -->
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page | Great Lakes Imaging, Inc.";
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
<header class="header data-stellar-background-ratio=0.5" id="home">
<div class="overlay-layer">
<div class="navbar bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
<div class="container">
<!--- nav header --->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#stamp-navigation" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-grid-2x2"></span>
</button>
Great Lakes Imaging, Inc.
</div>
</div>
</div>
<!--- main home wrapper --->
<div class="container">
<div class="only-logo">
<div class="navbar">
<div class="navbar-header">
<img alt="Great Lakes Imaging Main Logo" src="images/newGLITranswhite.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro-section">
<h1 class="white-text intro">Your #1 source for digital x-ray equipment</h1>
<h5 class="white-text">We just happen to have 100 + chiropractic tables, too</h5>
<div class="button">Browse all of our equipment</div>
</div>
</div>
</div>
</div>
<!--- /main home wrapper --->
</div>
</header>
#Html.Partial("_Menu")
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
I have render problems with my CSS and JS in ASP.Net MVC 5.
In my _layout.cshtml I have include allot CSS and JS with "link" and "script" tags.
I`m trying to display User details in new page, but page contains only text and no CSS and JS files have been loaded.
Model code:
public class DetailViewModel
{
public ApplicationUser User { get; set; }
}
View code:
#model WebApplication1.Models.DetailViewModel
<h2>Detaisl</h2>
#Model.User.UserName
Controller method is showing the Details view code:
[HttpGet]
public ActionResult Details(string id)
{
DetailViewModel model = new DetailViewModel();
model.User = UserManager.FindById(id);
return View(model);
}
And finaly a method call from other list view, that shows all users in db:
#Html.ActionLink("Details", "Details", new {id = item.User.Id})
The result is a page with a text but missing all CSS and JS files.
What I have done wrong? Is it something my logic wrong, I`m new to web developing. Just trying to display user properties on a new page.
_layout.cshhtm
#using WebApplication1.Helper.Const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../Content/ace/assets/css/bootstrap.css" />
<link rel="stylesheet" href="../Content/ace/assets/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="../Content/ace/assets/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="../Content/ace/assets/css/ace.css"
class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../Content/ace/assets/css/ace-part2.css" class="ace-main-stylesheet" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="../Content/ace/assets/css/ace-ie.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="../Content/ace/assets/js/ace-extra.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="../Content/ace/assets/js/html5shiv.js"></script>
<script src="../Content/ace/assets/js/respond.js"></script>
<![endif]-->
<!--Google char API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default">
<script type="text/javascript"> try { ace.settings.check('navbar', 'fixed') } catch (e) { } </script>
<div class="navbar-container" id="navbar-container">
<!-- #section:basics/sidebar.mobile.toggle -->
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /section:basics/sidebar.mobile.toggle -->
<div class="navbar-header pull-left">
<!-- #section:basics/navbar.layout.brand -->
<a href="#Url.Action("Index", "Home")" class="navbar-brand">
<small><i class="fa fa-leaf"></i> #Views.appName #Views.appTitle</small>
</a><!-- /section:basics/navbar.layout.brand -->
<!-- #section:basics/navbar.toggle -->
<!-- /section:basics/navbar.toggle -->
</div>
<!-- #section:basics/navbar.dropdown -->
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<!-- #section:basics/navbar.user_menu -->
<li class="light-blue">
#Html.Partial("_LoginPartial")
</li><!-- /section:basics/navbar.user_menu -->
</ul>
</div><!-- /section:basics/navbar.dropdown -->
</div><!-- /.navbar-container -->
</div>
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
<script type="text/javascript"> try { ace.settings.check('main-container', 'fixed') } catch (e) { } </script>
<!-- #section:basics/sidebar -->
#Html.Partial("_MenuPartial")<!-- /section:basics/sidebar -->
<div class="main-content">
<div class="main-content-inner">
<!-- #section:basics/content.breadcrumbs -->
#Html.Partial("_BreadcrumbsPartial")<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
#RenderBody()<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content-inner -->
</div><!-- /.main-content -->
<!-- footer -->
<div class="footer">
<div class="footer-inner">
<!-- #section:basics/footer -->
<div class="footer-content">
<span>
#Views.appName <span class="blue bolder">#Views.appTitle</span> © 2015
</span>
</div> <!-- /section:basics/footer -->
</div>
</div>
<!-- slide to top button -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../Content/ace/assets/js/jquery.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../Content/ace/assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='../Content/ace/assets/js/jquery.mobile.custom.js'>" + "<" + "/script>");
</script>
<script src="../Content/ace/assets/js/bootstrap.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="../Content/ace/assets/js/excanvas.js"></script>
<![endif]-->
<!-- ace scripts -->
<script src="../Content/ace/assets/js/ace/elements.scroller.js"></script>
<script src="../Content/ace/assets/js/ace/elements.colorpicker.js"></script>
<script src="../Content/ace/assets/js/ace/elements.fileinput.js"></script>
<script src="../Content/ace/assets/js/ace/elements.typeahead.js"></script>
<script src="../Content/ace/assets/js/ace/elements.wysiwyg.js"></script>
<script src="../Content/ace/assets/js/ace/elements.spinner.js"></script>
<script src="../Content/ace/assets/js/ace/elements.treeview.js"></script>
<script src="../Content/ace/assets/js/ace/elements.wizard.js"></script>
<script src="../Content/ace/assets/js/ace/elements.aside.js"></script>
<script src="../Content/ace/assets/js/ace/ace.js"></script>
<script src="../Content/ace/assets/js/ace/ace.ajax-content.js"></script>
<script src="../Content/ace/assets/js/ace/ace.touch-drag.js"></script>
<script src="../Content/ace/assets/js/ace/ace.sidebar.js"></script>
<script src="../Content/ace/assets/js/ace/ace.sidebar-scroll-1.js"></script>
<script src="../Content/ace/assets/js/ace/ace.submenu-hover.js"></script>
<script src="../Content/ace/assets/js/ace/ace.widget-box.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings-rtl.js"></script>
<script src="../Content/ace/assets/js/ace/ace.settings-skin.js"></script>
<script src="../Content/ace/assets/js/ace/ace.widget-on-reload.js"></script>
<script src="../Content/ace/assets/js/ace/ace.searchbox-autocomplete.js></script>
</body>
</html>
../ will go up one directory in your structure. So when you are on /manage it will go back up to the root, but when you are on /details/id it will be looking for those resources in your /details folder.
Replace ../ with ~/ and this will look for a relative path.
Youre using relative paths to your JS and CSS files.
Try changing the path's to either their absolute url or use the UrlHelper class.
#Url.Content("~/Content/ace/assets/css/font-awesome.css")
its better to bundle the things which are in the same directory to make it faster than normal compilation... and please use
~/ instead of ../
for bundling:
go to: project_name -> bundleconfig.cs
you will get idea once you visit... :D
I'm adapting the Blueprint CSS framework for my web site project, but I'm noticing that the blueprint isn't following some of its own rules. I've run through the tutorials on their web site and tried Googling a solution, but nothing is working.
I'm trying to set up a page layout like so:
-----------------------------------------------------------------------
| Image (header) 950px |
-----------------------------------------------------------------------
|Navbar | Body (560px) | Ad Bar|
| | |(190px)|
| 200px | | |
| | | |
... ..... ...
| | | |
-----------------------------------------------------------------------
| (footer) 950px |
-----------------------------------------------------------------------
I'd like the Body to be flanked by a Navbar (with a right-border) and Ad Bar (with a left-border) that expand in height to match the height of the Body (scaling depending on how much content is in it), and a footer that is simply tacked on to the bottom. So far, the header and body appear perfectly. However, the Navbar doesn't span the height of the body. Also, the Ad Bar does not appear on the right of the Body, but rather wraps around to the extreme left (left of the Navbar and below the Body). The Footer doesn't seem to line up with the rest of the site either, as I wrote it to center-align text, but it's off-center (slightly to the left).
Here's my HTML5 code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--Import fancy-type plugin. -->
<link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<title>My Web Site Home</title>
</head>
<body>
<div class="container">
<!------------------------------------------------------->
<div id="header" class="span-24" style="background: #F68712">
<h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
</div>
<div id="sidebar" class="span-5">
<div class="span-6">
<img src="home.png" alt="Home" /></li>
</div>
<div class="span-6">
<img src="newmember.png" alt="Member Sign Up" />
</div>
<div class="span-6">
<img src="memberlist.png" alt="Member List" />
</div>
</div>
<div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
<p>Some text.</p>
<p>Some more text.</p>
<p>Even more text!</p>
</div>
<div id="adbar" class="span-5 last">
Ads.
</div>
<div id="footer" class="span-24" style="text-align: center">
<h6 class="alt">Copyright ©2012 Joe Schmo.</h6>
</div>
<!------------------------------------------------------->
</div>
</body>
</html>
I've followed all of the English tutorials on the site, but can't seem to figure out why it doesn't want to cooperate. I'm developing my site with Microsoft Webmatrix, and am previewing my site both in IE9 and Chrome. If anyone could lend a hand I'd really appreciate it.
Thank you!
<hr style="clear:both; width:100%" />
try this just before footer div
For your sidebar you have a class of span-5 yet it contains 3 divs of span-6. If you remove the class attribute for the three menu divs as I assume that you want them to be the full width of the containing div, does this fix your issue?
I've got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).
I've spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn't match what can be seen in the browser.
I managed to reduce the issue down to a very simple case. It's pretty much the basic boilerplate template with my added JavaScript:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 2
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 1
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
test.js
$(document).bind("pagechange", function(event, data) {
console.info('Changed to page: ' + data.toPage.attr('id'));
$('#el1').hide();
$('#el2').show();
});
You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.
And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.
Any idea what could be causing this issue?
A couple of things you might try.
Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.
Use on directly on the page:
$('#page1').on('pagechange', function() {});