I'm trying to use FontAwesome for some control icons on a jQuery lightbox plugin I've developed. For the life of me, and I can't get the icons to display in IE7. I followed the advised here to reload the IE7 stylesheet after the lightbox opens. However, where the icons should be, I just see their UTF numbers (e.g. 0xf024;). It's almost as if the output has been "escaped" somehow. Any help or ideas would be greatly appreciated.
Update:
I just discovered that this isn't just happening on dynamically loaded content. I'm seeing the same thing on any icon just loaded in the HTML.
Update 2:
I think the problem may be related to subsetting. I was using a subset of font-awesome, and when I tried just loading the complete package it worked. Now, I have to see what the difference is between the subset and the full package that's breaking it.
As indicated in the update above, the problem was with the subsetting of the font. The customized IE7 stylesheet for the subset had a few bugs. The problem came from the characters being referenced like this 0xf023; instead of like this . Once I made that correction, everything worked as expected.
Related
I was trying to fix the width of the images however, unexpectedly, the navigation pager below disappeared.(pages 1,2,3). I am new to CSS and have no idea what happened. I don't now how to fix this, the navigation codes are still present however I guess it cannot find any space to show up. Can you help?
Code:https://gist.github.com/anonymous/3704b07a027426208738
Website:https://www.alphabitrage.com
I went through your code until I counted about 50 coding errors.
So I ran the source code (from the GitHub link you provided) through the W3C Markup Validation Service, which found 565 coding errors.
This alone suggests multiple problems with your web page and potential difficulties ahead in terms of maintenance and troubleshooting.
However, I understand you're working with a template so recommending that you re-structure your code to be valid and semantically correct (which I would normally do) may not be feasible in this case.
Also, you mention in your comments that the code was working well until you made some adjustments to the widths of images. So I put the errors aside and continued searching for a possible problem.
Providing a link to another website with a working template was a good idea on your part. I was able to compare your code with the code from the other site.
I discovered that your code was missing the divs that render the HTML for the pagination links.
In particular:
<div class="blog-pager" id="blog-pager"></div>
... is completely missing from your code.
Your Site
Other Site
Once you restore that code block your pager should re-appear.
Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.
I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?
You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola
I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});