See this demo
I'm using the fixedheadertable plugin available here
For some reason my sample table is not scrolling, what am I doing wrong?
Initialization is done at the bottom of the javascript code:
$("#fixed").fixedHeaderTable();
$("#fixed").fixedHeaderTable("show");
It looks like you were missing the required CSS from the demo files, I've added them to this fiddle and it seems to work for me now.
If you look at the Github page for the project, there's a demo folder, in there I had a look at test.html it included the following CSS references:
<link href="../css/defaultTheme.css" rel="stylesheet" media="screen" />
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
I'm not sure specifically which styles are required for it to work as opposed to styles that are there just for cosmetic purposes as I don't have time (I just dumped all the CSS from those two files in the fiddle) but hopefully you should be able to figure that out :)
Related
https://github.com/MadhavaY/RandomQuotesGenerator here is the link to the repository. HTML is loading but css and js are not. Link to the website https://madhavay.github.io/RandomQuotesGenerator/. I saw other answers too but i could not get where am i going wrong.
Hello madhava I reviewed your project and found out that you are still using your local paths to link your css and javascript
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
just change /All Projects/randomqotesproject/randomquotes.css to
./randomquotes.css
You need to change the path of both files.
As is:
<script src="/All Projects/randomqotesproject/randomquotes.js"></script>
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
If you remove the path, e.g:
/All Projects/randomqotesproject/
It should work.
If changing the path doesn't work for you, you can easily add a URL to the CSS and JS instead.
EX: https://madhavay.github.io/RandomQuotesGenerator/randomquotes.css
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.
edit: I just realized the classes I was trying to have styled are NOT included in the ThemeRollers CSS. I was trying to style .ui-li elements, but these are not included in ThemeRoller. Very misleading and aggravating. I don't recall this ever being addressed on their website.
I have made my first custom theme through JQM's ThemeRoller. The JQM structure CSS that is to be included keeps overriding my custom ThemeRoller CSS. I've tried placing it in the <head> section of the HTML code above and below the JQM structure:
<link rel="stylesheet" href="myCustomTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
or
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="myCustomTheme.css" />
I've also tried the !important thing in the custom CSS for the elements that have the incorrect style, but this still is overridden by the structure CSS. Not sure why this is so. How can I use my custom ThemeRoller css so that it overrides the unthemed JQM Structure CSS?
Seeing the clarification in your question.Have you tried giving data-role="none" with the elements you want to give the customized css?
It will prevent those element from getting applied the jquery mobile structure css.
And also you are always allowed to edit the jquery mobile css to your customized styling. We need to use unminified version of jquery mobile css for debugging purpose.
I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?
I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.
At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.
Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.