Bootstrap Toggle Menu Fails to load - javascript

I'm sure this issue is the result of conflicting code, but I cant seem to find it. I've removed all of the page except for the menu bar area. I'd would appreciate any help in getting the drop down to appear. It may be better to just recreate the top portion of the page at this point, but I thought I would check here first in case its just an oversight.
Thanks in advance.
<https://jsfiddle.net/cxLap188/#&togetherjs=GqBl9GC4UQ>

In that jsfiddle you have 2 div with id="bs-example-navbar-collapse-1", so the navbar-toggle works with the first it finds, just delete the one you dont need (the one after that <h3 class="hedLogo"> I guess).

Related

Smooth scrolling on same page when clicking the navigation bar (About, Portfolio...)

I would like to make a smooth scrolling to different parts of my page when clicking on navigation bar.
I have googled this but I found codes that I don't understand, they don't explain where I should put my info, they just throw a long code with no indication of how to adapt it to my case. I would really appreciate some help.
here is my codepen.
`https://codepen.io/aabla/full/aYYOxy`
You have an exemple on this page :
https://css-tricks.com/snippets/jquery/smooth-scrolling/
And everything is explained in comments.. There is simpler ways, but this one is really complete..
If you want to make this work, you have to call jQuery first.
EDIT
Here is your codepen working :
https://codepen.io/anon/pen/EEBOEg
Plus, in yours you had some mistakes on ID attributes (The IDs of the links were not equal to those of the <div> elements), this could not work anyway..

Conflicting jQuery plugins

I would first like to say that this site has been incredibly useful for me as I have been learning web coding in my spare time. I have decided to register as I have a specific question I would like to ask.
I am working on my new website and a specific test page (www.owenprescott.com/home.html). I have come across a problem that I am hoping someone can help me with. I have a jQuery plugin that creates a hover effect over my thumbnail images and the inline code is causing an issue (jquery.dirinline.js), the function targets my (li) boxes and says this...
$('.da-thumbs > li').hoverdir();
The problem is that I have a couple of white boxes with project information wrapped in (li) tags. I do not want the white boxes to be effected by the above jQuery function. If you visit my site you will see what the issue is when you hover over the white boxes. I would be very greatfull on some input, either I need to alter the jQuery function or remove the (li) tags from the white info boxes however I am unsure how to get them to display correctly either way.
I hope I have not made this question to confusing and thanks in advance for any advice. Also as this will be my template page if you have any suggestions to improve my code feel free to let me know, I know I still need to remove the default Dreamweaver information.
Your JS can be changed to:
$('.da-thumbs > li > a').parent().hoverdir();
And it should work with the HTML as is. The ones you want to exclude would match li>div, but not li>a, so getting the anchors and then selecting their parents will get only the items you need.
So exclude them from the matched set. Use not() to remove them.
$('.da-thumbs > li').not(".someClassInfoThingy").hoverdir();
or check if it those info blocks will never have a link, you can do
$('.da-thumbs > li:has(a)').hoverdir();

make addClass reset on click

I'm sure it's just changing one thing, or adding it, but I can't make it work. An image on top of a video slider is supposed to fade away when you play the video. Then, if you click another (they're linked through thumbnails) it will make the image pop back up and fade agisn. the first part works, but after the first time, it doesn't work anymore. Can anyone help me? Here's the fiddle
You have a few serious html and javascript syntax errors that might be causing some trouble.
I properly indented your code in jsfiddle and seems like you have a broken body tag, and two extra closing div tags that are disconnected.
In your javascript, in the videos array, you missed a pretty important quote.
Check this fiddle http://jsfiddle.net/elclanrs/dp5wJ/12/. When the code is properly indented the erors are very easy to spot with the syntax highlighting.
You're re-binding $('#myVid').bind("ended",... on each click.

Javascript Accordion

I have a strange bug I cant quite figure out, I've built an accordion slider that shows short content intially and when clicked then shows the long content.
At any one time only 1 tab should be open but when 2 opens the short content dissapears.
ive attached a fiddle, can anybody see whats wrong? Is it because they all shgare the same class?
http://jsfiddle.net/2v44c/
Here's what I came up with.
Simplified the JS a little bit and added 1 line of CSS to help with hiding the short content.
http://jsfiddle.net/2v44c/2/

How my select list become uneditable?

I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag

Categories