I'm completely stuck as to how to fix this. When I test it offline it works great. When I upload it and run it live none the images on my site load unless you click on the link for the page a second time. And on the press page it loads for a second and then its the same as the other pages but a second click on the link doesn't fix it. I've checked out this problem in firefox and safari.
P.S. I know my Menu's still are having issues if anyone has any suggestions for that I'd be super thankful. Mainly how can I get the hidden menu to stay centered.
Thanks!!!!!
http://www.tracyashaw.com/e2studio/index.html
http://www.tracyashaw.com/e2studio/press.hmtl
This on on the top of each page
<link rel="stylesheet" href="e2studio.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '100%'
});
});
</script>
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("images/home_1.jpg","images/newport.jpg","images/newport_life.jpg","images/RI_monthly.jpg","images/unique_homes.jpg","images/ri_monthly_cover.jpg","images/so_ri_press_cover.jpg","images/grace_ormonde_cover.jpg")
</script>
The jQuery mousewheel plug-in you are using clearly states in the header comments that jQuery 1.2.2+ is required, likely due to the dependency on the special property of jQuery's event object. You have linked to jQuery 1.2.1. Also some image requests are coming back with a 404 response code. You'll have to address these two items.
Related
I am working on a project which requires me to show some images one after the other in a popup on page load. To accomplish this, I'm using lightcase.js as it fulfills my requirement to a great extent. However, I don't want to load the images the way it has been shown in the demo. Rather, I want to initialize the images under the document ready function.
After googling a lot I came across a piece of code that does the job to some extent. The complete code is:-
<html>
<head>
<title>Lightcase Lightbox plugin test</title>
<link href="css/lightcase.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/lightcase.js"></script>
<script src="js/jquery.events.touch.js"></script>
<script>
$(document).ready(function(){
var imgURLs = [
'https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
"https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage_2x.png"
];
var randomIndex = Math.floor(Math.random() * imgURLs.length);
var imgURL = imgURLs[randomIndex];
setTimeout(function(){
lightcase.start({
href: imgURL,
// more options like width, height, etc.
});
},1000); // 1000 to load it after 1 second from page load
});
</script>
</body>
</html>
As you can see that the above code randomly loads any one image on page load. Could someone please suggest a tweak/change in the code so that it loads a series of images like a gallery plugin. Thanks.
NOTE: Lightcase Author's website is not working hence am unable to see the documentation.
I am using jQuery in order to create a custom popUp similar to a tutorial/tip for the end user (who can be on Chrome OR any other browser). However as you can see in the below image, the divs that contain my code have a large top which pushes my code down. While using Chrome's developer tools, I notice it would take -591px to have the popup where I want so I used the below code:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
<script>
function myFunction() {
$(function () {
$("#something").dialog();
});
$("#something").dialog({
top:-591
});
}
</script>
<div id="something" style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>
I tried several answers from this link but they didn't work. Also, I noticed when I comment out the first script line (jquery-2.1.11.min.js) it stops working, so it might have to do with that jQuery version?
Here is the screenshot from Chrome's Dev Tools:
The problem is that you have added js again instead of adding CSS
Change it to jquery-ui.css
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
DEMO
I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.
im trying to switch the stylesheet.css and the content section at the same time, if the user click on a Section on the Top-menue bar.
If I do one of them alone, it works fine, but both together will not work at the moment.
In my index.php I have a function that set the Stylesheet:
<link id="pagestyle" rel="stylesheet" type="text/css" href="Style.css">
<script type="text/javascript">
function swapStyleSheet (sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
return;
}
</script>
In the Menu.php is the code for changing the section and it also calls the function above. The Categories are in a list.
<li>Games</li>
With the return false statement the Style switch correct, but not the Content selection. And if I remove the return false statement the Content is correct but the Style switches only for a little moment.
Can somebody help me, please!
Thank you guys! It works now...
I load the Stylesheet now in the php file for every section in the tag with onload. Looks like this:
<body onload="swapStyleSheet('Game.css')">
I'm trying to add Fancybox to my ASP.NET MVC application but I'm having some troubles.
As you can see, I added references to jQuery and Fancybox. The css is incapsulated inside of my style.css. And all the pictures are in the right place.
<link rel="stylesheet" href="/Content/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.fancybox-1.2.6.pack.js"></script>
Well, I added this lines to fire up the Fancybox plugin:
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox(); // The a with zoom class
});
</script>
Then I have the link:
<a class="zoom" href="http://www.nytimes.com">This goes to iframe</a>
But when I click on the link I get a: Microsoft JScript runtime error: Permission denied
alt text http://img265.imageshack.us/img265/7738/screenshot20091123at352.png
And this is my screen after that:
alt text http://img14.imageshack.us/img14/7738/screenshot20091123at352.png
I don't know what to do. I'm desperate because I've spent all my day trying to figuring out what's happening. Please, help! :)
You need to add the class 'iframe' to the link to tell fancybox to use an iframe to load the content to avoid a conflict with the same origin policy. The same origin policy prevents the browser from downloading external content via AJAX. Alternatively it appears you can add a ?iframe parameter to the URL and achieve the same effect.