javascript Accordion Customisation - javascript

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.

Related

Disable JavaScript for specific section

Hi so I'm working on a little project and I keep running into an issue with my script I have used it in the past with no problems but this time it's affecting my one section/div in a very weird way.. It just isn't there.. All the others are fine but this one.. so is there maybe a way to disable this script for that selected bit if code?
Note I only want to disable the one script for that one section..
Thanks in advance, I'm new so sorry if I'm doing this wrong xD
If you are intending to prevent scripts in a page from running in a certain section of your webpage, wrapping it up in an iframe will do.

Hide web page source code [duplicate]

This question already has answers here:
How to hide html source & disable right click and text copy?
(21 answers)
Closed 9 years ago.
I wonder how to hide the source code of a web page. This is an example of webpage with hidden source (right click -> view page source). Any ideas or suggestions?
UPDATE I fully agree, that fully hiding HTML source is impossible, otherwise the browser could't parse it. Using tools like FireBub etc. will show you the source. The interesting in the example above in that on "show source code" the displayed page does not match the output.
Now I understand it is just another kind of technology used here - XSLT.
Thanks for your replies!
If your page is generated dynamically (by Javascript), then it using View Source will not show anything (or very little, anyway). I suspect that's how your example is doing it.
Bear in mind that any page generated this way will still be visible by using a code inspector such as Firebug. So as #Brad M says, this will only stop people who don't really know what they're doing.
If you build the entire page in Java or Flash (or something similar like Silverlight I guess) then it's a lot harder for someone to find out what the source code is (though Java is pretty easy to decompile)
There is no way to hide your code from a client that must execute the code.
Your example just did some trick to prevent right-clicking and stuff. But eventually you can get your way around.
For interpreted language such as javascript, the following adage is true.
" Lock on the door is only for the one who don't care. If there comes thief, most of the time he is already prepared."
All you can do to prevent is obfuscating your code. That will prevent it for some time. But remember, if they are going to crack it, it is not unstoppable. The basic thing to remember is: your script is going to run on the client side and is "INTERPRETED" by browser. In these days, when there are few tools that can create source code from compiled file, the thought of hiding javascript code is even not thinkable. This How can I obfuscate (protect) JavaScript? can help you on how to do it.

Creating a "box-webpage" upon click

I'm trying to accomplish something that might be relatively simple, but I don't know what I would call it (if there is a specific name for it), hence my searches have proved useless.
What I'm trying to accomplish is simple: I have a page built off off the Masonry jquery plugin (similar to http://designshack.net/tutorialexamples/masonry/demos/masonry.html). All I want to do is that when I click on a specific picture, it creates a "box" that fills up part of the screen and can contain another webpage (to describe the picture) while fading out most of the background. Then when I click outside of the box, it returns to all of my pictures.
I've seen this before, as I'm sure everybody else has, but for the life of me I cannot remember an example to look at or how best to do this. I don't have too much experience with javascript or jquery (which is why I'm asking this), but any help to point me in the right direction, whether it is using javascript or html/css, would be great.
If anybody does get the gist of what I'm describing and can explain it better, then you're more than welcome to edit..
What you need are modal windows.
I know the twitter bootstrap has built a pretty good framework for this:
http://getbootstrap.com/javascript/#modals
If you aren't using the bootstrap directly you might be able to pick out what you need.

Page flickers on load - hide/show javascript - Total Newbie

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');

Storytelling Scrolling

Can someone please identify how this site has the effect of sliding through pages? Mainly how it pulls down one page up and onto another. Is it Javascript? I think it is very well done.
http://hire.visualidiot.com/typestacks
Thanks!
Joe
helixed's answer explains how they did it. However if you want to recreate the effect yourself have a look at using Parallaxjs rather than taking potentially copy-written code.
See the demo site: http://stolksdorf.github.com/Parallaxjs/
And source: https://github.com/stolksdorf/parallaxjs/
Edit: There is a bug with that website, try holding down the arrow key for a few seconds before letting go.
I opened it in Safari and disabled JavaScript. The sliding effect went away (although it degrades nicely). Clearly JavaScript must be involved somehow. Okay, so I popped open Chrome Developer Tools and looked at the resources. There's a script called handler.js. I opened it up and sure enough there's some nicely documented code. It looks like it's using jQuery animations. Take a look at the script. You should be able to figure it out from there.

Categories