jqGrid overlay disabling the rest of my page - javascript

I'm having a problem with jqGrid disabling the rest of my page. In other posts it says people forgot to load the specific jqGrid .css but I think I do have that one actually loaded. The grid is styled with a themeroller.
I import the following css
<link rel="stylesheet" href="/src/css/ui.jqgrid.css">
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
<link rel="stylesheet" href="css/main.css">
This all makes it I cant access / click my other controls:
Can anybody tell me what I'm missing?
Thanks in advance,
Sander

Added: $('#lui_grid').removeClass('ui-widget-overlay jqgrid-overlay'); after the JQGrid initialization. It's fixed now.

Related

Missing 3 recources for the Slick carousel. How do I implement those?

In the console it says that I'm missing the slick.woff, ajax-loader.gif and slick.tff.
So I've found the CDN links for all these 3, but I have no idea how to implement them in my code (or in what kind of tag).
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
The resources you've mentioned that are failing to load are referenced as relative imports in Slick's stylesheets.
Make sure that you've included these stylesheets (the first code block below) correctly, as per the Slick documentation:
Example using jsDelivr
Just add a link to the css file in your <head>:
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
Then, before your closing tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>

I can't make SmartWizard Jquery 4 to work with Bootstrap 4

I'm new to StackOverflow and I would like to ask if someone can help me fix my code. I can't make SmartWizard jquery 4 to work. I absolutely copied every line of code (except the sources of the css and js files) yet it still doesn't work. I'm sorry but I don't know what's wrong, I'm just a newbie in coding and I hope that you can help me understand this little problem.
I will attach my source code and images here.
Code from Jquery SmartWizard that I wish to copy is from http://techlaboratory.net/smartwizard. Download the Zip file and open the index.html file under examples folder of the zip file.
Here is the output of the code I wish to copy:
Output of the code I wish to copy
Here is my source code.
<!DOCTYPE html>
<html>
<head>
<title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Only difference is i'm using Bootstrap 4 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
//the same as the code in index
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
</body>
</html>
Here is my project folder architecture: project folder architecture
Here is the output of my code: My output
Once again I'm sorry I'm just a newbie in coding and thank you for replying to my question.
EDIT: I just found out that Jquery SmartWizard 4 is not compatible / does not work with Bootstrap 4 based on the comments but someone made it work with,as the commenter said, "It works after modifications. I still have small problems to solve. Thanks". Does anybody know how to make Jquery SmartWizard 4 work with Bootstrap 4? Thanks a lot!
EDIT2: I made it work with Bootstrap 4 now and here is what I did:
Changed this line of code:
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
In this syntax it fetches this version of SmartWizard Jquery SmartWizard 4.2.2 is being fetched.
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
In this syntax it fetches the latest version of SmartWizard Jquery SmartWizard 4.3.1 is being fetched.
Now my question is how come the extra slash made a difference on how the SmartWizard fetches its version, I would love to know why. Thanks a lot! But now I'm able to make Jquery SmartWizard 4.3.1 work with Bootstrap.
To make Jquery SmartWizard 4 work with Bootstrap 4, I had to change lines of code
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
I did the same for the css files so it looks like this now
<link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
to use the minified version since when I used the minified version but the syntax of the link is "/sample2/resources/css/smart_wizard.min.css" the document fetches the SmartWizard v4.x version. I absolutely don't know why this happens ,where adding an extra slash after resources changes the version that is being used, so if anyone can provide answers to it that would be great! Thanks a lot! Cheers!

DataTables tables appear incorrectly

I am using Bootstrap 4 and I followed the example provided by DataTables on this page: link.
The code that I used is here: link
And here is how it appears:
How can I fix this?
I tried making the datatables work and I found the issue, you are using a bootstrap css link that conflicts with the one of bootstrap, use these 2 links instead to make the table work.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>

jQuery UI dialog widget not appearing

For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?

Foundation.js dropdown menu in Ember.js

I'm trying to use the Foundation framework in an Ember app. The problem I'm having is with the navbar dropdown menu. When placing the Foundation layout in the handlebars template, the navbar no longer works on hover or on click. However, if you shrink the window so the mobile version is displayed, the navbar works on click. I'm pretty sure it's not the Foundation code, because the same code in regular HTML without Ember works.
I checked out these solutions, but neither worked for me (the first is still in place in my code).
My code can be found here, with index.html using Ember and grid.html not using Ember.
If you have any insights or questions, please let me know.
The dropdown hover behaviour comes from CSS. Ember doesn't play a part in this bug. :)
I noticed grid.html uses CSS from the foundation website, while the index.html uses CSS from local files. I think you have mismatched versions of foundation's CSS files.
I changed the CSS link tags inside the index.html to use the one on foundation as the grid.html does. That fixes the problem.
<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/style.css">-->
<!--<link rel="stylesheet" href="css/foundation.css">-->
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/normalize.css">
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/foundation.css">
I would suggest downloading the working CSS from the foundation site, and customizing it from there.

Categories