I created in blog spot a new page for a gallery with a menu, the result is good but there is so much space between the buttons, and a big gap in the top of the page, when I try <b> or <p> It wont go, I also tried to minimise the space with another script but the result was no space but unclickable buttons, and always when I success deleting spaces, the buttons wont work ! Please help me ! (It works on dreamweaver perfectly but not on Blogger !
This is the code :
<p> <p><b:include data='blog' name='all-head-content'/></p>
<p><style type="text/css">
.menutitle{
cursor:pointer;
<span style="margin-bottom: 5px"><br>;
background-color:#000000 ;
color:#FFF;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:0px solid #000000;/* */
}</p>
.submenu{
margin-bottom: 0.5em;
}
</style> </p>
</b:if>
<p><script type="text/javascript">
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
<p>if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate </p>
</script></p>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Dior</div>
<span class="submenu" id="sub1">
<p><div id="PictoBrowser110620155241">Get the flash player here: http://www.adobe.com/flashplayer</div><script type="text/javascript" src="http://www.db798.com/pictobrowser/swfobject.js"></script><script type="text/javascript"> var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "500", "650", "8", "#000000"); so.addVariable("source", "sets"); so.addVariable("names", "Scheisse"); so.addVariable("userName", "ScheisseMag"); so.addVariable("userId", "64286522#N04"); so.addVariable("ids", "72157626880953125"); so.addVariable("titles", "on"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "0"); so.addVariable("colorHexVar", "f"); so.addVariable("initialScale", "on"); so.addVariable("bgAlpha", "8"); so.write("PictoBrowser110620155241"); </script>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- Usage Terms<br>
- DHTML FAQs<br>
- Scripts FAQs</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- Coding Forums<br></span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- JavaScript Kit<br>
- Freewarejava<br>
- Cool Text<br>
- Google.com
</span></p></div> </p>
I'm assuming you're using Firefox, because it doesn't seem to work the same using other browsers..
the problem is the space between eich
bouton like between Dior and Faq/help
and help forum, they are meant to be
attached to each other
I'll start by saying that I'm not familiar with Blogger.
Your HTML:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">
What you get if you View Source on your page:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><br /> <!-- extra br! -->
<div class="menutitle" onclick="SwitchMenu('sub3')">
Those frequent extra <br />s are the main problem. There are lots of them. You need to prevent them from being inserted. Perhaps removing the whitespace in your HTML will help? Like this:
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">..</span><div class="menutitle" onclick="SwitchMenu('sub3')">
also the gap between the Title of the
page and those menus !
You need to get rid of many instances of <p> and </p> that are wrapped around everything, including <script>s, for some reason..
Also, you have the same problem with <br />s being magically inserted. Again, compare your HTML to what comes out when you use View Source in your browser.
After removing those extraneous <p> and </p> and <br /> using Firebug (just to test), this was the result:
Related
I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).
This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box.
He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.
ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.
If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?
I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.
So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?
<p> hello world, hello world, hello world, hello world</p>
<!--BEGIN SEARCH BOX -->
<div class="search_box">
<form action="" id="form2">
<div>
<input type="text" id="search">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
</div>
</form>
</div>
<!--END SEARCH BOX -->
<script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
https://codepen.io/b-jody-spedicato/pen/ExNzqQP
<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound=self.find(str);
if (strFound && self.getSelection && !self.getSelection().anchorNode) {
strFound=self.find(str)
}
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
//-->
</script>
</head>
<body>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="find">
<p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>
I have used the media picker as data type for the type, for which the user is going to choose what image they want as the deal image.
But for some reason i can't get the razor syntax to show the image. If I make an If statement to check if the page contains an image then it won't. I think this is a problem that occurs because i have misunderstood something.
My current razor statement:
<img src="#Umbraco.TypedMedia(Model.Content.GetPropertyValue("deal1image")).Url" />
The above code won't show anything.
Hope any of you can guide me to what i do wrong and evt. stuff I'm missing.
This is how my current home.cshtml looks like:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "Master.cshtml";
}
<div class="container">
<div class="col-md-4">
<!--Image here-->
<img src="#Umbraco.Media(CurrentPage.deal1image).Url" />
<div class="thumbnail thumbnailcustom thumbnailbg1">
<h3>#Umbraco.Field("dealtitle1")</h3>
<p>#Umbraco.Field("dealdescription1")</p>
</div>
</div>
<div class="col-md-4">
<!--Image here-->
<div class="thumbnail thumbnailcustom thumbnailbg2">
<h3>#Umbraco.Field("dealtitle2")</h3>
<p>#Umbraco.Field("dealdescription2")</p>
</div>
</div>
<div class="col-md-4">
<!--Image here-->
<div class="thumbnail thumbnailcustom thumbnailbg3">
<h3>#Umbraco.Field("dealtitle3")</h3>
<p>#Umbraco.Field("dealdescription3")</p>
</div>
</div>
</div>
You need to use Umbraco.Media to get the media. So like this
<img src="#Umbraco.Media(Model.Content.GetPropertyValue("deal1image").ToString()).Url" />
Or
<img src="#Umbraco.Media(CurrentPage.deal1image).Url" />
An example of using Umbraco.Media:
var myPage = CurrentPage.AncestorsOrSelf().Where("DocumentTypeAlias == #0", "yourPageAlias").First();
Umbraco.Media(myPage.myImage.ToString()).Url
Link on OUR Umbraco offers two solutions:
Typed:
#if (Model.Content.HasValue("caseStudyImages"))
{
var caseStudyImagesList = Model.Content.GetPropertyValue<string>("caseStudyImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var caseStudyImagesCollection = Umbraco.TypedMedia(caseStudyImagesList).Where(x => x != null);
foreach (var caseStudyImage in caseStudyImagesCollection)
{
<img src="#caseStudyImage.Url" style="width:300px;height:300px" />
}
}
Dynamic:
#if (CurrentPage.HasValue("caseStudyImages"))
{
var caseStudyImagesList = CurrentPage.CaseStudyImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var caseStudyImagesCollection = Umbraco.Media(caseStudyImagesList);
foreach (var caseStudyImage in caseStudyImagesCollection)
{
<img src="#caseStudyImage.Url" style="width:300px;height:300px" />
}
}
Also, double check your media picker data type alias. Typos are rather common in this part.
This may be a bit clunky compared to other answers but this is what I currently have.
var imageId = Model.Content.GetPropertyValue<int>("eventPoster"); // gets node id
var evId = evpId.Id; // gets image id
var evMd = Umbraco.Media(evId); // I believe this turns the id into a string
var evUrl = evMd.Url; // gets the url of the string
I was originally having problems with the below JS smooth scroll as it made any real links rather then #location stop working.
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
So I changed it to
$(document).ready(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1200);
return false;
}
}
});
});
Which sorted the original problem of being unable to add a working "blog" link in the navbar however it has now rendered the left and right (next and prev) carousel buttons not working.
I would be grateful if someone can help me out with this as it is driving me crazy.
The html for the carousel is as follows
<section id="main-slider" class="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-content">
<h1>Responsive Website Design</h1>
<p class="lead">With 20% of all website traffic in the UK coming from tablets and smart phones then never before has it been a better time to have a responsive website.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Free Consultation</h1>
<p class="lead">I understand every business has different needs so we can discuss what it is your want to achieve and using my expert advice make it a reality.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Built to be SEO/Google Friendly</h1>
<p class="lead">Having a website built is the first step but next you need to put it in front of your target audience. On site SEO is where it all begins.</p>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
<a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
</section><!--/#main-slider-->
First of all, the answers above are correct. I just wanted to spell it out a little clearer for anyone needing help.
The code that needs to be updated is the SmoothScroll function itself. You will need to know the ID of the carousel from your bootstrap page. Just add the carousel ID to the not().click function and it will work like a charm. Here is an example of what I did. The change was made on the third line of code, where you see the carousel ID#.
<script>
$(function() {
$('a[href*=#]:not([href=#carousel-299058])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 70
}, 500);
return false;
}
}
});
});
</script>
Try replacing this:
$('a[href*=#]:not([href=#])').click(function() {
with:
$('a[href*=#]:not([href=#media])').click(function () {
Happy coding!
I was using the smooth scrolling javascript everyone uses and having the same issue, like all obedient little developers out there I was using #myCarousel:
<a class="right carousel-control" href="#myCarousel" data-slide="next">
and as soon as I changed [href=media] to [href=myCarousel] my Bootstrap carousel controls started working again.
I had this issue recently and my solution was to use a class on each link as opposed to the href attribute selectors within the jQuery function.
This does mean a little extra HTML mark-up but I felt it was more robust and causes less interference with additional scripts that may be added within your project.
So this:
$('a[href*=#]:not([href=#])').click(function() {
Becomes this:
$('.your-class-name').click(function() {
And any smooth scrolling links you add to your page will become:
Link
And scroll to:
<div id="section">... Content ...</div>
Dont forget to add : \\. It is necessary to add it since the latest version of JQUERY.
$('a[href*=\\#]:not([href=\\#carousel-299058])').click(function() {
I want to show a ValidationSummary mcv3 with "alert-error" Bootstrap styling.
I'm using a Razor view, and I show model errors with this code:
#Html.ValidationSummary(true, "Errors: ")
It generates HTML code like this:
<div class="validation-summary-errors">
<span>Errors:</span>
<ul>
<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>
</ul>
</div>
I tried with this too:
#Html.ValidationSummary(true, "Errors:", new { #class = "alert alert-error" })
and it works ok, but without the close button (X)
It generates HTML code like this:
<div class="validation-summary-errors alert alert-error">
<span>Errors:</span>
<ul>
<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>
</ul>
</div>
but Bootstrap alert should have this button into the div:
<button type="button" class="close" data-dismiss="alert">×</button>
Can anyone help?
This Works! - Thanks Rick B
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
{
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<h5 class="alert-heading">Ingreso Incorrecto</h5>
#Html.ValidationSummary(true)
</div>
}
I also had to remove the class ".validation-summary-errors" from "site.css", because that style defines other font color and weight.
edited again
I misunderstood your question at first. I think the following is what you want:
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
{
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
#Html.ValidationSummary(true, "Errors: ")
</div>
}
This answer is based on RickB's one
Updated for the latest bootstrap ==>> alert-error doesn't exist in favor of alert-danger.
Works for all Validation Errors not only Key String.Empty ("")
For anyone using Bootstrap 3 and trying to get nice looking alerts:
if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) {
<div class="alert alert-danger">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
#Html.ValidationSummary(false, "Errors: ")
</div>
}
The solution provided by RickB works only on manually added errors on (String.Empty key) but not on those generated by ModelState (normally this gets triggered first via javascript but it's always a good practice to have a fallback if (for example) the Html.ValidationMessageFor is missing or many other situations.
Alternative solution. =)
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
// Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger"
<div class="alert alert-danger alert-error">
<a class="close" data-dismiss="alert">×</a>
#Html.ValidationSummary(true, "Errors: ")
</div>
}
I did not like how the ValidationSummary rendered using a bullet list (unordered list). It had a lot of unnecessary space below the error list.
A solution to that issue - is simply to loop through the errors and render the errors how you want. I used paragraphs. For example:
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
<div class="alert alert-danger" role="alert">
<a class="close" data-dismiss="alert">×</a>
#foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
{
<p>#modelError.ErrorMessage</p>
}
</div>
}
The result, in my case, looks something like this:
#Html.ValidationSummary("", new { #class = "alert alert-danger" })
Consider writing an extension method to the HtmlHelper like:
public static class HtmlHelperExtensions
{
public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper)
{
if (htmlHelper == null)
{
throw new ArgumentNullException("htmlHelper");
}
if (htmlHelper.ViewData.ModelState.IsValid)
{
return new HtmlString(string.Empty);
}
return new HtmlString(
"<div class=\"alert alert-warning\">"
+ htmlHelper.ValidationSummary()
+ "</div>");
}
}
Then you just need to fit the ul-li styling in your stylesheet.
In MVC 5, ViewData.ModelState[""] always returned a null value. I had to resort to the IsValid command.
if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">×</a>
<strong>Validation Errors</strong>
#Html.ValidationSummary()
</div>
}
I took a slightly different route: using JQuery to hook into the form submit:
$('form').each(function() {
var theForm = $(this);
theForm.submit(function() {
if ($(this).valid()) {
if ($(this).find('.validation-summary-valid').length) {
$('.validation-summary-errors').hide();
}
} else {
if ($(this).find('.validation-summary-errors').length) {
$('.validation-summary-errors')
.addClass('alert alert-error')
.prepend('<p><strong>Validation Exceptions:</strong></p>');
}
}
});
});
I have this set inside a self-executing javascript module so that it hooks onto any validation summaries that I create.
HTH
Chuck
You can use jquery:
$(function(){
$('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
$(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
});
});
It is looking for every div containing given error classes from bootstrap and writing html at beginning of the div. I am adding .alert-block class as the bootstrap page says:
For longer messages, increase the padding on the top and bottom of the
alert wrapper by adding .alert-block.
This solution uses Sass to make it work but you could achieve the same thing with basic css. To make this work with client side validation we cant rely on checking the ModelState since that assumes a postback has occurred. The out-of-the-box mvc client side validation already makes things visible at the right time so let it do its thing and simply style the list items in the validation summary to render like bootstrap alerts.
Razor markup:
#Html.ValidationSummary(false, null, new { #class = "validation-summary-errors-alerts" })
Sass
.validation-summary-errors-alerts{
ul{
margin: 0;
list-style: none;
li{
#extend .alert;
#extend .alert-danger;
}
}}
The css that produced for my project looked like this - yours will be different:
.validation-summary-errors-alerts ul li {
min-height: 10px;
padding: 15px 20px 15px 62px;
position: relative;
border: 1px solid #ca972b;
color: #bb7629;
background-color: #fedc50;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: none;}
Based on the answers here:
#if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
#Html.ValidationSummary(false, "Errors: ")
</div>
}
(I'm using Bootstrap 4)
Alternative solution with pure javascript (jQuery). I'm working with MVC4 + Bootstrap3 but it works perfect for you.
$(function () {
$(".validation-summary-errors").addClass('alert alert-danger');
$(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>')
});
If you don't want to write server side logic then is a nice alternative solution.
TwitterBootstrapMVC takes care of this one with just one line:
#Html.Bootstrap().ValidationSummary()
Important, to assure that it behaves the same during the server side and client side (unobtrissive) validation, you need to include a javaScript file that takes care of that.
You can customize your Validation helper with extension methods however you see fit.
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it with Bootstrap 3 requires a license.
Expanding upon Daniel Björk's solution you can include a little script to adjust the CSS included with ValidationSummary() output. The resulting bootstrap alert was showing a rendering issue until I removed the validation-summary-errors class.
#if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
<div class="alert alert-danger">
×
<h4>Validation Errors</h4>
#Html.ValidationSummary()
</div>
}
<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
</script>
You can also easily give a bootstrap highlight to fields with errors. See http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/
To achieve the same in bootstrap 4, use the following:
#if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
{
<div class="col-auto alert alert-danger" role="alert">
#Html.ValidationSummary(true)
</div>
}
If it needs to work with clientside javascript I suggests doing this:
.validation-summary-valid {
display: none;
}
You still can assign the bootstrap class
#Html.ValidationSummary(null, new {#class= "alert alert-danger" })
but it will only show when you have actual errors.
I'm using Ajax to dynamically populate a DIV. I have each page content stored in XML files as CDATA. When a user clicks on a link from the navigation bar, the Ajax loads the XML for that particular page, parses it, and populates the DIV with it's content.
Everything is working GREAT, except for one thing. I have a jQuery modal popup whose markup is loaded from that page's XML file. The .js and .css files from the jQuery plugin are all loaded, and when this is HARD CODED (i.e., not loaded from XML), it works fine. But when it's loaded from the XML, the modal doesn't work.
When the page is loaded from the XML file- What the page is supposed to do is load the HTML from the XML file, which it does, and there's a hyperlink that when clicked, it's supposed to create the modal popup window. Instead, clicking on the link does NOT fire up the modal popup window.
When the page is hard coded- it does everything it's supposed to do.
A live example is at:
http://mikemarks.net/clientSites/tabras/
Click on "The Band", and at the bottom you'll see the hyperlink called "Demo". Clicking on that should bring up a modal popup window, but instead as you can see it just takes you to the top of the page.
Below is my markup (notice the div id="copy", which is the placeholder for my HTML content that's loaded from the XML file), my Ajax JavaScript code, and my XML file (which is shown as the markup that's loaded into the div id="copy").
<div id="leftTwoThirdsColumn">
<div id="menu">
<ul class="menu">
<li style="width:65px;"><a id="default" href="#" onclick="makeRequest('xml/default.xml');"><span>Home</span></a></li>
<li style="width:65px;"><a id="lyrics" href="#" onclick="makeRequest('xml/lyrics.xml');"><span>Lyrics</span></a></li>
<li style="width:110px;"><a id="merch" href="#" onclick="makeRequest('xml/merch.xml');"><span>Merchandise</span></a></li>
<li style="width:93px;"><a id="bio" href="#" onclick="makeRequest('xml/bio.xml');"><span>The Band</span></a></li>
<li style="width:80px;"><a id="contact" href="#" onclick="makeRequest('xml/contact.xml');"><span>Contact</span></a></li>
<li style="width:150px;" class="last"><a id="friends" href="#" onclick="makeRequest('xml/friends.xml');"><span>Friends of Tabräs</span></a></li>
</ul>
</div>
<br /><br />
<div id="copy">
</div>
</div>
function makeRequest(url)
{
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
sendRequest(url);
}
function sendRequest(url)
{
request.onreadystatechange = onResponse;
request.open("GET", url, true);
request.send(null);
}
function checkReadyState(obj)
{
if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4)
{
if(obj.status == 200)
{
return true;
}
else if(obj.status == 404)
{
// Add a custom message or redirect the user to another page
document.getElementById('copy').innerHTML = "File not found";
}
else
{
document.getElementById('copy').innerHTML = "There was a problem retrieving the XML.";
}
}
}
function onResponse()
{
if(checkReadyState(request)) {
var response = request.responseXML.documentElement;
var root = new Array();
root = response.getElementsByTagName('');
//alert("Total Number of HTML Elements Found: " + response.getElementsByTagName("").length);
var html = '';
for (var i = 0; i < root.length; i++) {
var tagName = response.getElementsByTagName("").item(i).nodeName;
var tagObj = response.getElementsByTagName("").item(i);
html += tagObj.firstChild.nodeValue;
}
document.getElementById('copy').innerHTML = html;
}
}
<div style="padding-top:5px; margin-left:auto; margin-right:auto; text-align:center;">
<img src="images/ShawnBioActive.png" />
<img src="images/JasonBioActive.png" />
<img src="images/WillBioActive.png" />
<img src="images/RasoulBioActive.png" />
<img src="images/bioStrip.png" />
<div id='basic-modal'><h3>Basic Modal Dialog</h3><p>A basic modal dialog with minimal styling and no additional options. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p><input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a></div><script type="text/javascript" src="../js/modal/jquery.simplemodal.js"></script><script type="text/javascript" src="../js/modal/basic.js"></script><link type="text/css" href="../css/modal/demo.css" rel="stylesheet" media="screen" /><link type="text/css" href="../css/modal/basic.css" rel="stylesheet" media="screen" /><script type='text/javascript'>jQuery().ready(function () {$('#basic-modal-content').modal();});</script>
<div id="basic-modal-content"><h3>Basic Modal Dialog</h3></div><div style='display:none'><img src='images/modal/basic/x.png' alt='' /></div></test2>
</div>
It seems that your webpage lacks of jquery.simplemodal.js and basic.js and the css associated ( for example, for the display:none; on your basic-modal-content )
That's why you don't have any modal on load.
Plus, your link or button doesn't have any event handler (for example, $('.basic').click(...);)
That's why you don't have any other action than the anchor.
To remove the anchor action, I recommand to use event.preventDefault
Three problems:
It is moving you to the top because you have a href="#" change it to href="javascript:void(0)"
http://mikemarks.net/clientSites/js/modal/jquery.simplemodal.js returns 404. Check location
http://mikemarks.net/clientSites/js/modal/basic.js returns 404. Check location