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
Related
I'm working on a index.html file that was previously created by DNN (Dot Net Nuke).
I've put a Javascript Slideshow Banner in where there was previously an SWF Slideshow banner. The problem is the javascript is not showing up.
Here's what the problem (i.e. banner not showing) looks like: http://www.drkachooie.ca/index.html
Note: When I upload an html with just the flash banner it shows up (http://www.drkachooie.ca/rice.html), so something must be overlapping it, right?
My question is: How can I adjust my code to make my javascript show up? If someone can check the code out, and see what's wrong, I would greatly appreciate it.
Here's the javascript (Correction: HTML & CSS) in the body tags of the index.html document:
<div id="mhrotator">
<style type="text/css"> #mhrotator img { display:none; } </style>
<img src="images/Bitmap1.jpg" title="Bitmap1" />
<img src="images/Bitmap2.jpg" title="Bitmap2" />
<img src="images/Bitmap3.jpg" title="Bitmap3" />
<img src="images/Bitmap4.jpg" title="Bitmap4" />
<img src="images/Bitmap5.jpg" title="Bitmap5" />
</div>
Here's the javascript in the head tags of my index.html document:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhrotator.js"></script>
<script type="text/javascript" src="js/initrotator.js"></script>
<link rel="stylesheet" href="js/mhrotator.css" type="text/css" />
Currently all the other pages of the website are using the old swf file as my banner. but the index.html file is currently using the javascript (which is not showing up)
Note: If you need any other information, feel free to ask!
The version that is working has the banner inside of a div element that is not being affected by <style type="text/css"> #mhrotator img { display:none; } </style> which is preventing the version that isn't working from showing the images.
I see this error in console :-
Uncaught TypeError: Cannot read property 'mhrotator' of null
at HTMLDocument.<anonymous> (initrotator.js:1)
at Function.ready (jquery.js:26)
at HTMLDocument.L (jquery.js:33)
Javascript is getting executed before div element mhrotator gets loaded.
Try placing below script tag after </body> tag.
<script type="text/javascript" src="js/mhrotator.js">
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.
I'm using Magnific Popup JQ library to show gallery in pop-up overlay.
This is the base code:
<html>
<head>
<title>Ristna tuletorn. Маяк на острове, Эстония. - Gallery test</title>
<base href="http://ristnatuletorn.eu/" />
<link href="assets/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
type:'image',
items: [
{src:'/assets/gallery/1/11.JPG'},
{src:'/assets/gallery/1/2.jpg'},
{src:'/assets/gallery/1/1.jpg'},
{src:'/assets/gallery/1/3.jpg'},
{src:'/assets/gallery/1/4.jpg'},
{src:'/assets/gallery/1/5.JPG'},
{src:'/assets/gallery/1/6.jpg'},
{src:'/assets/gallery/1/7.JPG'},
{src:'/assets/gallery/1/8.JPG'},
{src:'/assets/gallery/1/9.jpg'},
{src:'/assets/gallery/1/10.JPG'},
{src:'/assets/gallery/1/12.JPG'},
{src:'/assets/gallery/1/13.JPG'},
{src:'/assets/gallery/1/14.JPG'},
{src:'/assets/gallery/1/15.JPG'},
],
gallery: {
enabled: true
}
});
});
</script>
<link rel="stylesheet" href="/assets/components/gallery/css/web.css" type="text/css" />
</head>
<body>
Show inline popup
</body>
</html>
It does not show images in FF browsers (Windows and Ubuntu). In Chrome it works ok.
This is the link to the live page: http://ristnatuletorn.eu/index.php?id=8
Can anyone suggest any solution?
Thank you!
I know it is a bit late, but since the answer was never posted... Try declaring DOCTYPE. I had the same issue and this fixed it for me. It is likely that your official site has a DOCTYPE declared and your test code did not.
It works if you remove the max-height CSS property from the <img>.
The set max-height: 36px; is just too small, if you go into the console and debug it see what happens ass you go up to say 100px.
You somehow set this specifically for FF, since in Chrome it's at 633px.
Cheers
I've tried something but is not responsive anymore. Just used fixed popup size.
Comment out the following # Line 1210.
item.img.css('max-height', mfp.wH-decr);
Hope this helps!
Cheers!
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.
I cant make the shadowbox work...I have a static html page which has an image that acts as a link to open a swf in the shadowbox.
however when I click on the image it opens the swf like any other image file in the browser.
The Shadow box doesn't seem to work at all.
This is my html page. I am using shadowbox-build-3.0b. Its strange that this editor doesnt allow new users to use image tag in the html code in the editor. So i have changed mine to image.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/adapters/shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<link type="text/css" href="shadowbox-build-3.0b/shadowbox.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="shadowbox-build-3.0b/languages/shadowbox-en.js"></script>
<!-- Begin Shadowbox JS -->
<script type="text/javascript">
jQuery(document).ready(function () {
Shadowbox.init({
language: "en",
players: ["image"]
});
});
</script>
<!-- End Shadowbox JS -->
</head>
<body>
<image src="imagewithplaybutton.jpg" >
</body>
</html>
Hmm. I have not used shadowbox myself, but if you look at the way how the page suggests you set shadowbox up, there seems to be things that are wrong.
As i understand you want swf file to open when clicking on image; Shouldn't you set players: to swf then?
Your code also does not show if your img has link around it and if that link has rel="shadowbox" attribute.
I guess it should be set up something like this:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["swf"]
});
</script>
<img alrt="click here to open swf file" src="imgofflash.jpg"/>
Shadowbox.init() shouldn't be in the document.ready(). It should execute as the page loads.