I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.
<script type="text/javascript">
$(document).ready(function() {
$('#outline_text_ifr')
.contents()
.find('head')
.append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>
var $head = $("#IFrame").contents().find("head");
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));
or
$('#IFrame').contents().find('#div1').css({
color: 'purple'
});
Related
I have published a website on a laptop with IIS 7.5 running IE9. When I have the internet plugged in the website works fine. The weird thing is that it will work fine in firefox weither the machine has internet or not.
Some other information that may be helpful.
Running Windows 7 64Bit. Latest version of firefox. IE9.
Not sure what else you may need. I have tried checking IE permissions but there may be something I have missed so any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#*----------------- JQUERY UI for Accordion Starts here-------------------- *#
<link href="../../Content/themes/Blue/jquery-ui-1.9.1.custom.min.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
#* -----------JQUERY UI for Accordion Ends here--------------------- *# #*----------------- JQUERY UI for Delete Dialog Starts here-------------------- *#
<script src="../../Scripts/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
#* <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>*#
<script src="../../Scripts/external/jquery-ui.js">></script>
#*----------------- JQUERY UI for Delete Dialog Ends here-------------------- *#
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#*
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
*# #* ----------- Scripts added for Devexpress but commented because JQUERY UI not working --------------------- *#
#*
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.4.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
*# #* ----------- Scripts added for Devexpress ends here--------------------- *#
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.GridView },
new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
new Script { ExtensionSuite = ExtensionSuite.Editors },
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Chart },
new Script { ExtensionSuite = ExtensionSuite.Report }
//new Script { ExtensionSuite = ExtensionSuite.Scheduler }
)
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
//new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }
)
#* ---------------------------------JQUERY Scripts for Delete confirmation Starts here --------------------------------*#
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 500;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 250,
resizable: false,
modal: true,
buttons:
{
"Delete": function () {
$.post(deleteLinkObj[0].href, function (data) { //Post to action
//Check data the return from the middle layer, if it is just true, deletion is successful
if (data == '#Boolean.TrueString') {
deleteLinkObj.closest("tr").hide('fast'); //Hide Row
$("#dialog").dialog("close"); //See it used #dialog instead of (this) because the scope (context) has changed in the "Delete" callback
$(this).empty();
$("#StatusMsg").html("Deleted");
location.reload(); //refreshes the page
}
else {
//Show the errror on the dialog content. Data is used to show the error
//expecting the Error handlers in middle layer will return the meaning ful error message
$("#dialog").html(data);
//Hide confirmation button inorder to show the user to only the content of error in the same
//dialog box and allow to cancel this dialog
$(":button:contains('Delete')").css("display", "none");
$("#StatusMsg").html("Not Deleted");
}
//location.reload();
});
},
"Cancel": function () {
//This reset of the Delete button is need since if it wsas invoked and jumped into show error routine,
// then that routine would have removed the Delete button.
$(":button:contains('Delete')").css("display", "inline");
$(this).dialog("close");
$("#StatusMsg").html("");
}
}
});
var deleteLinkObj;
var deletMsg;
$('a.inputFakeDelete').click(function () {
//Here the message is built using the delete button properties id and name.
//So every page calling this jquery need to have the link button embedded with these properties
//eg: id = Grade, name = the name of the grade from the model
deletMsg = "Are you sure you want to delete this " + this.id;
if (this.name == "") {
}
else {
deletMsg = deletMsg + " '" + this.name + "'" //"Are you sure you want to delete the " + (this).id + " '" + (this).name + "'?";
}
deletMsg = deletMsg + "?"
$("#dialog").html(deletMsg)
deleteLinkObj = $(this); //to use in the dialog javascript
$("#dialog").dialog("open");
return false;
});
});
</script>
#*----------------------------------JQUERY Scripts delete confirmation Ends here --------------------------------*#
#*----------------------------------JQUERY Scripts for record cuirrent filer --------------------------------*#
<script type="text/javascript">
var currentValue = 0;
function handleClick(currentfilter) {
//alert('Old value: ' + currentValue);
//alert('New value: ' + currentfilter.value);
currentValue = currentfilter.value;
//Redirect the page so that will reload with new parameters
window.location = 'http://' + window.location.host + currentValue; //Add 'http://' since host will not include this
}
</script>
#*----------------------------------JQUERY Scripts for record cuirrent filer ends here --------------------------------*#
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
The error page just says that it cannot find a specific webpage. Customer/Delete
I am not sure if this is was the fix for my problem (and it is a little hard to test as the machine is not my own) but later on we reconfigured .net by using aspnet_regiis.exe and the problem looks like it has disapeared.
I am using the colorbox on my site due to this the page is loading very slowly in IE as comparison to other browsers. When I remove the colorbox jQuery file the pages are loading fine. How can I resolve this? I am using the following scripts on my site:
<script src="js/script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<?php if($_GET['s']=="invoices") {?>
<script src="js/thickbox1.js" type="text/javascript"></script>
<?php } else {?>
<script src="js/thickbox.js" type="text/javascript"></script>
<?php }?>
<script src="js/jquery.treeview.min.js" type="text/javascript"></script>
<script src="js/jquery.tipTip.minified.js" type="text/javascript"></script>
You could try defering script execution. This way it would be executed later, when the page is already loaded. Also, you can put it in the end of your HTML document, right before the closing </body> tag. The browser could then render most of the UI and only then load "colorbox".
Here's an option: Load your scripts via JavaScript on DOM ready.
Consider the following:
if (window.addEventListener) { // for non-crappy browsers
window.addEventListener('load', loadHandler, false);
} else if (window.attachEvent) { // for IE
window.attachEvent('onload', loadHandler);
}
function loadHandler() {
var scripts = {
'scripts': {
'src': 'js/scripts.js',
'type': 'text/javascript'
},
'jquery': {
'src': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
'type': ''
},
'colorbox': {
'src': 'js/jquery.colorbox-min.js',
'type': 'text/javascript'
},
'thickbox1': {
'src': 'js/thickbox1.js',
'type': 'text/javascript'
},
'thickbox': {
'src': 'js/thickbox.js',
'type': 'text/javascript'
},
'treeview': {
'src': 'js/jquery.treeview.min.js',
'type': 'text/javascript'
},
'tipTip': {
'src': 'js/jquery.tipTip.minified.js',
'type': 'text/javascript'
}
};
for (var key in scripts) {
script = document.createElement('script');
script.src = scripts[key]['src'];
script.type = scripts[key]['type'];
document.body.appendChild(script);
}
}
This way, your scripts will only load when the page is ready.
I'm loading a CSS file dynamically using a little bit of randomization:
var cookie = $.cookie('necgroupcolour', { path: '/' });
if (cookie == null) {
var rnd = Math.floor(Math.random() * 3);
$.cookie('necgroupcolour', rnd, { path: '/' });
}
switch ($.cookie('necgroupcolour', { path: '/' })) {
case "0":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
break;
case "1":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/blue/HomeMaster.css" />');
break;
case "2":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/green/HomeMaster.css" />');
break;
default:
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
}
This works fine in Firefox, Safari, Chrome, but not in IE8 or lower.
When running this through Fiddler and checking the source you can see that no CSS file is getting loaded.
Any ideas how I could solve this?
Maybe try put this code in head and use document.write. ugly, but will work....
I know this may be too late, but it may help someone else.
Instead of using
$('head').append('<link rel="stylesheet" type="text/css" href="PATH_TO_CSS_FILE>');
use the following code:
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", PATH_TO_CSS_FILE);
document.getElementsByTagName("head")[0].appendChild(fileref);
I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)
It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
I am trying to use Greybox and I am getting frustrated with it not finding my images that I wish to display. I think it may have to do with relative URLs and not pointing in the right spot. But I am not certain. I feel like I have tried every possible URL combination.
Is this the issue, or am I missing something entirely??
I have read the FAQ on Greybox here: http://orangoo.com/labs/GreyBox/FAQ/ but it didn't really offer me a solution.
I would be very grateful for any assistance. Thanks.
Note: Looks like the server is case sensitive.
URL to the page in question is: http://www.ecometrix.ca/refresh/emma.html
Images are located: /refresh/emma/images/
Images are labeled: screen01.jpg, screen02.jpg, screen03.jpg etc.
Here is the greybox content in the header of my HTML:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.ecometrix.ca/refresh/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/refresh/banner/Scripts/AC_RunActiveContent.js"></script>
Here is the image set that I have defined (Now using absolute URLs):
<script type="text/javascript">
var image_set = [{'caption': 'Screenshot 1', 'url': 'http://www.ecometrix.ca/refresh/images/screen01.jpg'},
{'caption': 'Screenshot 2', 'url': 'http://www.ecometrix.ca/refresh/images/screen02.jpg'},
{'caption': 'Screenshot 3', 'url': 'http://www.ecometrix.ca/refresh/images/screen03.jpg'},
{'caption': 'Screenshot 4', 'url': 'http://www.ecometrix.ca/refresh/images/screen04.jpg'},
{'caption': 'Screenshot 5', 'url': 'http://www.ecometrix.ca/refresh/images/screen05.jpg'}];
</script>
Here is the anchor tag in the HTML:
Screenshots
EDIT: Here's the code that works for me:
In between the and tags:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.ecometrix.ca/refresh/greybox/";
</script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/AJS.js"></script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/gb_scripts.js"></script>
<link href="http://www.ecometrix.ca/refresh/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
And
<script type="text/javascript">
var image_set = [{'caption': 'Screenshot 1', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen01.jpg'},
{'caption': 'Screenshot 2', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen02.jpg'},
{'caption': 'Screenshot 3', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen03.jpg'},
{'caption': 'Screenshot 4', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen04.jpg'},
{'caption': 'Screenshot 5', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen05.jpg'}];
</script>
In the body:
Screenshots
Here's the code that works for me:
In between the <head> and </head> tags:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.yourabsolute.url/including/filepath/to/greybox/";
</script>
<script type="text/javascript" src="/filepath/to/greybox/AJS.js"></script>
<script type="text/javascript" src="/filepath/to/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/filepath/to/greybox/gb_scripts.js"></script>
<link href="/filepath/to/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
And
<script type="text/javascript">
var image_set = [{'caption': 'This is the image caption displayed.', 'url': 'http://www.yourabsolute.url/including/filepath/to/greybox/your_image01.jpg'},
{'caption': 'This is the second image caption displayed.', 'url': 'http://www.yourabsolute.url/including/filepath/to/greybox/your_image02.jpg'}];
</script>
After the <body> tag:
Click Here to launch Greybox.
Note: There seems to be a bug with Greybox v.5.54 in that images don't always load on the first try. It just displays the greybox correctly but with no content. If you close the greybox that you launched the first time, and try click on the link one more time before refreshing the page, greybox will launch correctly. Including all appropriate content.
Install: Installing Greybox v5.53 instead of v5.54 seems to have solved the issue of the images not loading on the first try. Hope this helps.