I'm working on a search engine. And I'm having display issues, some features, style like fonts are added to my page. When I look at the elements tab I see things that do not exist in my style tag on my file.
I have another version of this file that works perfectly without any display issues. the only difference between the two files is that each file loads data from a different database. Also the page that i'm having trouble with does not display things like the description that you can see in the second page. Here are screen shots of both:
This is the page with the problems
and this is the page that works fine
You have Modernizr in your website, which adds the classes to the HTML tag. This should however not affect your styles (if you are not specifically targeting it). If your layout actuallay does differ, you probably have different style declarations which are affected by those classes.
Modernizr is a feature detection JavaScript library. It allows to distinct between browsers, which support a feature and such that do not.
See https://modernizr.com/docs
Related
I've searched for latest info but can't find a full answer relevant to my situation and since I'm new to js and php I need a little more direction.
I created a site using Bootstrap and the popover section proved a problem on mobile (specifically Safari - it doesn't dismiss). I decided to use BS panels for mobile and used Bootstrap's .hidden-lg and .visible-sm classes to show that popovers are visible on desktops and panels are visible on mobile sizes. However the script clashed, as soon as both are in my html file, it won't load won't of them, eg. popovers won't work but panels does. I tried to place it differently, thinking maybe the order in my code matters. In the end I found that little sentence in BS docs that says "don't use data attributes from multiple plugins on the same element". I figured that means I can't use two types of plugins in my one page even though the two sections are not supposed to be displayed on the same page - it should load only one depending on the device size.
I searched for a method to use jquery to detect screen size to insert a php file. I created two php files (one for large screens, one for small, placed the popover and panel sections in each) I created my original index as a new index.php.
I can't tell where I went wrong because it's not working and I've made so many changes to the code to try and fix it that it's probably a mess right now anyway.
I tried another method: I found some old info to create m.domain.com which means you have to include link rel="alternate"... in desktop file and rel="canonical" in mobile to link to mobile_file.php
It loaded the correct files (though mobile is duplicating my footer for no apparent reason) but the js script is still not activating properly. Now mobile is loading panels but not dismissing it (and it worked for sure when I tested the single file before) and desktop popover is not opening up (meaning the js is not working) at all!
How can I use a simple method to say: if the screen size is this, use this file and if not, use that file. I'm sure this is possible with js but I just can't find a clear, easy to understand and follow method online. Clearly my js knowledge is lacking but a simple site is proving complicated in the final steps. All help would be appreciated because it's really hard to find updated info on this exact issue.
for more info: I used the Bootstrap html boilerplate which links this by default as script: src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
The panels would only work if I use src="js/jquery.min.js"
I know these two are the culprits because when I deleted the first then the panels would work and when I deleted the second the popovers would work but they will not work for both with either one of these. I don't know what to change to make it work.
I have application where user can paste their html code, when ever I paste html with style tag those CSS rules are applied to my application too.
Those CSS rules should be applied only to pasted code.
Found this:
http://www.w3schools.com/tags/att_style_scoped.asp
But it only works with firefox, would be perfect solution for this problem.
Now I'm thinking about parsing pasted CSS rules and applying them to html as inline css rules.
Is there any better solution?
Use iFrame to provide safe way of showing user supplied HTML code. That way even when user tries to overwrite your site to look like bank account he still have no access to outer-iFrame content.
With Microsoft Office Word it is possible to see multiple pages at the same time and while adding new content to the first page, added content will push the content after that forward. Would you say that there exists a preferable solution for achieving similar functionality for a webpage by using HTML, CSS and JavaScript? There might be any amount of pages and not all of them could be shown at the same time.
There is a multi-column layout module in CSS3, but how about the editing part (and the browser support)?
It works with the CSS multicolumns just like you said. I did a wiki-like website that uses multicolumn layout and contenteditable to edit the text. I've noticed that Chrome sometimes has issues handling it (the tab crashes) but Firefox handles it fine. It will probably be fixed.
Another interesting solution is (still as a working-draft) CSS regions and "flow-into" rule.
Not really sure what's going on here, been staring at this for hours :/ ... basically, I'm implementing CodaSlider using the same CSS, same div id's, and same code as another project but it's not initializing the script and the "coda-slider-no-js" tag is not being removed.
The only thing that would be different would be that paths for the respective JS files (which I have checked and verified that they are in fact loading).
Any ideas for debugging (there is no coda-slider.css file because I have included the relevant styles inside my main style.css file).
Here's the page where it should be working:
http://easterndancer.com.s66112.gridserver.com/gallery/video/
You had a few issues (but you have just changed the source whilst I was debugging!)
I cannot see the main_slide element that you are trying to use for the slider. When you initialise the coda slider $('#main_slide').length is zero. Are you sure this element exists in the dom?
You are including both full and packed versions of the easing script file. (as a rule do not use packed - it can cause issues, use minified with gzip compression - notice jquery does not come with a packed option anymore)
Also are you sure the plethora of plugins you are using are compatible with the jquery 1.4.2?
You have duplicate id's in the dom "upcoming_events" - (always try to test your dom using the w3c validation tool). Duplicate id's can lead to unexpected results with jQuery.
Off Topic - Your initial page load is 1.2Mb which is very large, consider reducing the image quality/sizes
So, I've written a little javascript widget. All a user has to do is paste a script tag into the page, and right below it I insert a div with all of the content the user has requested.
Many sites do similar things, such as Twitter, Delicious and even StackOverflow.
What I'm curious about is how to test this widget to make sure that it will work properly on everyone's webpage. I'm not using an iframe, so I really want to make sure that this code will work when inserted most places. I know it looks the same in all browsers.
Suggestions? Or should I just build one hundred web pages and insert my script tag and see if it works? I would hope there is an easier way than that.
Once you have confirmed that your javascript works cross-browser in a controlled environment, here are some things that might cause problems when used on an actual website:
CSS
You're using a CSS class that is already being used (for a different purpose) by the target website
You're using positioning that might interfere with the site's CSS
The elements you are using are being styled by the website's CSS (you might want to use some sort of "reset" CSS that applies only to your widget)
HTML
You're creating elements with the same id attribute as an element that already exists on the website
You're specifying a name attribute that is already being used (while name can be used for multiple elements, you may not be expecting that)
Javascript
What is the expected behaviour without Javascript enabled? If your script creates everything, is it acceptable for nothing to be present without JS?
At very basic you should make sure your widget works for following test-cases. I am sure then it will work on all web-pages -
http/https: There should not be any warning for HTTPS pages for unencrypted content.
<script> / <no-script>: What if JavaScript is disabled? Is your widget still visible?
What happens when third-party cookies are disabled? Does your widget still work?
Layout-box restrictions: When parent div element's size is less than your widget. Does your widget overflow the given size and destroys owners page?
By keeping all your Javascripts under a namespace (global object) with a very unique name, you should be pretty much OK. Also, you can simply use an anonymous function if you just want to print out something.
Similar question: How to avoid name clashes in JavaScript widgets