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/
Related
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).
I have a one page scrolling website that I'm working on. I am trying to implement ScrollMagic and pin the first section so that the remaining sections of the website scrolls over top of the pinned section. I tried to create a jsfiddle to show the issue, but I can't seem to get jsfiddle working (first time using fiddle so I may have something not linked up correctly. link to fiddle...
After I get this working I have a follow up / new question in regards to scroll magic, but I think it would be helpful if I am able to show my problem in the fiddle.
You forgot to include external ScrollMagic libraries:
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js
I've added them to your jsFiddle and it looks like everything is working correctly now.
https://jsfiddle.net/fxf4b2cg/
Have fun coding!
First of all, it's my first post and I'm still kinda newbie but I'm keen on learning more and more.
I checked out this before I decided to ask here because I kinda got stucked.
So here is example of the code:
http://www.bootply.com/C1Xu5M0RnP
It works how I wanted it to do so but if I put it into my code and trying to test it locally I got some problems. Switching tabs by clicking on tabs work perfect, but when I try to click on the link which should move me to another tab it doesn't do so. I see the link + '#profile' or '#home' but tab and content don't show.
I don't have any errors at console debug. I included scripts in a way, a lot of people suggested here - jquery first, bootstrap after.
The question is what am I doing wrong or what libraries are preloaded on bootply?
I would be really grateful for any advices.
Seems like it works now. The problem was that I was using my own script first, then I was loading jquery and bootstrap.
Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David
Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)
Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');
I am using a Javascript accordion function which I found on the internet, however my Javascript skills are at a novice level ( Hence why I sourced a completed version to begin with).
What I have noticed is that when you load the page the accordion shows half initiated ( See Jsfiddle), what I would like to happen is that the accordion appears completely closed when the page is loaded.
I have put the accordion up on jsfiddle http://jsfiddle.net/richlewis14/uPvwL/, unfortunately the level of javascript used is beyond my capabilities and would appreciate any help in modifying it to my requirements, also if anyone could explain what is actually happening in the code I would appreciate that also, I would like to learn rather than jsut get the answer
Thanks
The script takes an argument to specify which element to open by default.
Change parentAccordion.init("acc","h3",0,0); to parentAccordion.init("acc","h3",0); and you're good to go :)
See http://jsfiddle.net/uPvwL/2/ for a working example.