Apply JavaScript to only a part of the code (example a menu) - javascript

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.

Related

Is it possible to use like js or something to load a navbar in HTML? It's hosted through Github Pages, so nothing server side would work

I have multiple .html files, and it's a hassle to go through each one and manually edit each file if I just wanted to add a link to the navbar. I'm using a bootstrap 5 one.
So, I was wondering if it's possible to have JavaScript take care of loading the navbar instead of me going in an editing each individual .html file just so all the navbar have the same content.
I don't know if this is possible, sorry if it's obvious that it's not possible or whatever, I honestly don't know.
If there's any other way to do it, let me know because I'd rather not edit like 10 different pages just because I wanted to add something to a dropdown menu in the navbar.
You should probably be using a static website generator. Have a look, for example, at Sergey which is specifically used for "including" common site parts such as navigation.
For other options have a look at https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

Debug Bootstrap 3 template

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

How to move .js from View to Separate asset - Ruby On Rails

This is a seemingly easy problem but it might not be. I am new to rails. As such I am still learning the in's and out's of the asset pipeline. I have an understanding of the assets/stylesheets and can get those to edit my view. However, I cannot get my assets/javascripts to work. The js does work if it is embedded in the view however.
I was hoping someone could take a peek at the source: https://github.com/Brownkyle219/clemson-sustainability
and you can see it functionally here:
http://clemson-sustainability.herokuapp.com
(I am aware that there is a routing issue when you click on the other tabs). Ignore the google charts stuff. My main focus is at the bottom of index.html.erb about the slider. All I want to do is move that script to a separate file in assets/javascripts. Any advice would be great! Thanks
You need to wrap your JS in $(document).ready(function({ yourCodeHere })
Otherwise, the JS gets executed before the elements they target are actually loaded and will not work.

Adding hyperlinks into xml file

I purchased a script online that's no longer supported and I just need one last functionality to finish off my project. One detail the client needs is to have a line of text link to another page in the site.
I do not know a whole lot about xml, but I understand it doesn't support html to include hyperlinks.
This is a quiz where users must answer specific questions in order to move on to the next step. It's fed into a div by a js file, I think, but I don't understand how it works. I'm not going to post any code just yet as I'm just reaching out for some advice right now and if what I want to do is even possible.
Is there some kind of a workaround? I've Googled plenty of sites with code chunks and have done a lot of experimenting, but I mostly just break the page the xml displays on.
Thanks.
Dont use the actual xml syntax of tags like <a></a>. Better replace these with other symbols like [a][/a]. When you output the code, simply replace [ and ] with < and >
You replace code before you put it into a div could look like this:
xmlAsString.replace(/\[/g,"<").replace(/\]/g,">");
edit:
I totally forgot about CDATA.
Forget my previous answer. Just add the <![CDATA[...]]> Tag around the anchor in your XML:
<![CDATA[link]]>

When working with an already made website, how do you know which file to edit to change something?

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

Categories

Resources