I'm converting psd to html, so I'm using bootstrap3. After I finished with converting, I have notice that I can not make container-fluid full width because I have left out some closing div tags, so I have turn on firebug and start inspecting div's one by one to see where do I need to close them, off course I have done it in the end, but it took me some time and that is fine.
I'm trying to understand how can I do this properly, and quickly, how can I properly debug a template, is there some work flow that will help me overcome this mistakes, and how can firebug help me speed up thing when I'm converting psd.
I found these links to be helpful when designing the structure of a web page with bootstrap:
Bootlint
debug.css
Related
I have been tasked with creating a new feature/block of HTML & CSS that contains some light JS for controls (think a carousel). It is working as expected but two of the requirements are that it's one block of code and it can be run in the console and display on the web page(e.g. Chrome)
I have added the CSS and JS into the html file, so one block of code, I hope is solved, I then tried to create a little function using insertAdjacentHTML to run in the console but that doesn't work as it doesn't accept anything other than pure html (no class names or tags etc)
I do not have access to the source code of the website they want to test it on, so apparently it has to be done in the console.
I also looked at extensions, to see if I can work out how they do it but not having much luck, happy if someone can recommend anyway in which I can display this new feature.
I understand why they want to do it this way as they will want to do quick demos of new features built, but still an unorthodox method imo. Happy to be told wrong.
Any help would be great.
TIA
EDIT: JS file - https://github.com/morphey-slavbard/product_slider/blob/main/main.js
HTML file - https://github.com/morphey-slavbard/product_slider/blob/main/index_2.html
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.
Today I found that my Wordpress website has encountered a problem. There are two unexpected letters at the top of the page which can be found in the screen shot below. I can't find where it is from the raw files of Wordpress. I don't know what happened. Could somebody help me please?
Heya :)You might be using some website screenshot plugin. Deactivate that plugin and then check the output. :)
i've had the same problem a while ago only instead of an n or two n's in your case i had a v just at the same place as yours is. What helped for me where the following steps.
Check all files, header.php, template files, etc.
Deactivate and activate your plug-ins. Maybe even try the Wordpress Re-install function from the updates page. Don't worry none of your contents like pages, posts, etc will be lost.
Check your widgets, sidebars and other content blocks from the back-end but also the corresponding template files.
If you have a decent editor like in my case PHPstorm make use of the show history function. It makes searching a lot easier.
I hope just like i had your problem will be solved after taking these steps.
For my page I use 2 JavaScript (external .js), one for the navigation menu:
src="js-menu/bootstrap.min.js"
And for the whole html page:
type="text/javascript" src="js/front.min.js"
The problem is that the whole page .js has some old menu coding and this interferes with my menu JavaScript.
I am a JavaScript beginner so I don't know how to correct it there, I would like to make my nav-menu .js applying only to my navigation div instead ...
Any idea ?
thanks
Try separating the code into different files. It can help in figuring out what is going on. Create a new file, called "temp_something", and copy all of the code into it. Then, try things like removing all of the other JavaScript files, but leave yours in. Then, comment out all code but the "bare minimum" code, and then slowly uncomment code. This may help you by giving you a starting point on where the problem may be.
I'm having a terrible hard time at trying to get the Mottie Tablesorter plugin to work properly on my HTML page.
I'm designing the front end of a website for someone, and I need the advanced filters provided with this plugin:
http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html#demo
I have downloaded the files in .zip format, extracted them and placed them in my project, and made sure all the links work properly and that the page can read them.
I have copy/pasted the stuff from the demo with the multiple types of filters across all the columns (in the code quotes) into my HTML page.
However, the second table header row inside the table header doesn't appear.
I can't figure out what it is that I'm doing wrong.
Here's a screenshot of what gets rendered on the page + the offending code inside the web inspector of Safari: http://puu.sh/dqzNX.png
As you can see, the second table header looks like it is trying to display, but it's empty?
And it seems like it generates a search for searching by text, but is set to hidden (I don't know why)
And it also generates the correct amount of TH's, but all of them (apart from the first one) are empty!!
I've been banging my head against a wall over this for 4 days now and have no clue!
Can anyone else get this demo to work properly?
Many thanks for taking the time to read all of this!
Looks like I must not have been pulling jQuery UI into my project properly, as when I started from scratch it all looks like it's working now! -- My bad, thanks for the help though, great table filtering!
In my haste I also seemed to have put a css CDN into a script src tag, causing some style errors where the date picker was below the table before it had been selected and had a transparent background. That had me stumped for a good 20 minutes until I realised my mistake!