I've tried for quite some time after passing the codeschools "Shaping up with Angular" course to make it work. The last thing I tried was even to copy their source code to make sure that there were no typos on my side and the results vary quite a lot and I don't know what I'm doing wrong at this point.
This is what my site looks like on GitPages:
http://danieboy.github.io/codeschool-shaping-up-with-angular-master/index.html
This is what it looks like on the course website:
http://i.imgur.com/r3xlCP7.png
Anyone able to shed some light on this problem is my hero.
The actual source can be found here: http://discuss.codeschool.io/t/shaping-up-with-angularjs-source-code-demo/5363
It seems that they have a style.css file that is not included in your code. That file specifies layout and appearance for the body tag, the img-thumbnails, img-wrap, small-image, thumbnail classes and others. Right now, you add these classes to elements in your html files, but there is no css stylesheet to define them.
Check out the plunker they share at the above link. You'll need to create a css file that specifies the appropriate styles for these classes and reference it in your index file header.
Related
I have a <ul></ul>class in which an element.style{} is getting applied from a .js file. Can I know how to know the exact .js file from which it is getting applied and the line of code? Below is the ss attached.
Check for some file name with flexslider or jquery.flexslider.js. If you have it then css is coming from their only search with .slides or with translate3d. If you don't have any then
the only possible way is with cleaver search. 1st search with ".slides" within your project. If you found any normal class not any library thats the place where it is coming. If you found any file like slider, carousel or owl or any other js file just delete the content of those file and refresh the page if the css is still their look for other file. If nothing happen look with parent class or ID.
If you use an IDE you can do a search for the styles applied in question in the javascript files, the IDE will highlight all the occurrences of the keywords that you use to search for. If the JavaScript file has been minified it can make it impossible because you won't have any idea what is what without a lot of analysis work. If you have the original source code just do a search it will allow you to do analysis really quick.
In Microsoft Edge if you click inspect element the CSS of element will appear on the right side of the screen. You can see which CSS style are being applied and use the checkmark interface to apply or remove the style. This will tell exactly where the CSS is coming from. If you want to know where the JavaScript is coming from I will use the search feature in my text editor to find the specific functions, or remove script tag temporary until I locate it.
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 want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely
Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell
I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.