I am very curious about how this rail text animation is made ("Creativity meets healthy food")
https://www.studiogusto.com/project/misura/
I've looked thousands of css generator webs and I can't find that animation! When going into developer tools, I don't understand why they copy and paste it so many times. Does anybody has a clue? I'd like to use it to put an "under construction" in my own web.
I tried to look for animation examples and I don't find it. When inspecting the code, I don't understand why they copy and paste it so many times.
Please note I am a beginner :)
Thanks,
... it looks like a CSS TRANSFORMATION of the block of text. And there's always the option to use something like GreenSock js lib (that's a whole different bag of possibilities though)
Related
I wondering whether there are some starting of templates for Apple help book.
As I am not a professional programmer, however, I have come across making apple help book. First of all, I was surprised by the apple help documentation quality. The author of Jekyll Apple Help called it Byzantine which was exactly my first impression. However, I was able to learn the basic concept.
When I have checked the way how Apple does tutorials for their applications I have realised that they use only simple HTML files without any JS and CSS.
So the question is:
How to do it like Apple?
Is it something which magically happens in apple help viewer?
Is there some hidden way how the styles and scripts are linked elsewhere?
If this is something which has to made manually
If I have to take care of JS and CSS – how to do that? Is it something which has to be programmed in x-code?
Or eventually, can somebody provide us with a documented help book template?
Apple does use Javascript. And a lot of it. For example if you look into their Pages.app help bundle you'll find at least 3 javascript files. It seems that these javascript files take care of loading and displaying the HTML files. So you won't find any javascript inside those.
Having said that, you don't actually need to use javascript unless you want the TOC button on the HelpViewer window to work. If you do, the Jekyll Apple Help project you mentioned already has the javascript required to make this work.
You should file a radar asking for updated documentation and sample code. I certainly did so when I was building my app's help book.
I really like the getting started guide by Bootstrap (http://getbootstrap.com/css/), and I want to do something similar in my project. I've looked at highlight.js but it seems the color is a bit off to me. I don't know how to implement the copy to clipboard feature. Is this something I should be able to come up with on my own? I prefer third party solutions since this isn't the main crux of my project, but I thought this will be nice to my users.
I'd suggest giving highlight.js another look. There are multiple style themes you can choose from if you find the color to be off on a particular one. Or, you can do a little css to customize the colors yourself.
An alternative for syntax highlighting is prism.js.
For the copy to clipboard piece, take a look at ZeroClipboard.
I'm involved in a new project. When I opened the first page, I noticed various tags like: <TMPL_IF>some code</TMPL_IF>.
There are quite straight forward and in a couple of hours I was able to do loops and conditional programming, everything is fine but I would like to understand some things about those tags:
Where these tags come from? Are they html? Or something different? Are an extension given by some sort of library on the server?
How can I make my code editor (read Dreamweaver, or jedit) make understand those tags and make the code highlight working again?
May I use those tags in all pages? I mean, I have some sites that could really have improovements with the use of those tags... I have search on the web, and I have seen that there are a bunch of them, from loops to unless conditions, really really nice, but I haven't find a place that teach them from scrap.
Please point me in the right direction.
I just did a quick search for my question and couldn't find anything directly on point.
I'm still very new to HTML and was wondering if someone could tell me how I could add a picture to my website and set the code so that if I click on it, it enlarges the picture in a new window.
I'm going to be adding around 600+ pics to my website so I was also wondering if there's a way to write the code once and have it apply to all the pics I add.
Thanks in advance,
- Danny B.
There's many many ways in which you could do this. The basic HTML for inserting an image with a link to a new window will be:
<a href="enlarged.html" target="_blank">
<img src="photos/photo-name.jpg" />
</a>
But it is a fair bit more complicated if you want to be able to dynamically display a large number of photos. If you want to code this yourself, you'll want to look into using something like PHP to output the HTML code automatically for 600+ images. Then instead of pointing the link for each to a new page, you might want to consider having the images load in a cool way, such as a javascript lightbox/colorbox some of the other answers suggest.
One possible alternative solution might be to look for some pre-created photo album script. I don't have any experience of these so I'll let someone else make some suggestions on that.
There are several ways to do this, but I'm assuming you'll have a simple site with lots of images on one page, and you'd like the images to zoom open "in a cool way".
Check out this: http://colorpowered.com/colorbox/
... click on View Demonstration and then see the various photo handling options.
This needs just some basic HTML and minimally configured Jquery. Very simple to use and produces a nice effect.
Google around using the keyword lightbox. Most of the solutions are ready-to-use Javascripts. Just include once, assign some IDs/classes, execute during onload and that's it. I personally have good experiences with Lightbox2 and jQuery Lightbox plugin.
I decided to go w/ target="_blank" -- Lightbox2 seems like it'd be great, but I'm really not sure how to use it and where to put all the code. The instructions I've found for it still assume the user has some standard knowledge in the field, that of which I do not currently possess. So, I'll stick to the target/blank approach until I can get more familiar w/ coding and then I'll upgrade to Lightbox.
Once again, I want to say thanks to everyone. You guys always respond quickly and accurately.
With much appreciation,
- Danny B
The simplest way would be to add a link to it, and set the target attribute to target="_blank". The link should point to the image itself. This would regularly open a new tab though, if you want a whole new window, you should tryhref="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')",which would open a new, standalone window. If you're looking for fade/resize effects and such, try one of the other answers posted.
I've been given the task of doing some work customizing an artist's space in MySpace. It seems that you sort of hack the HTML you want into your edit profile page (which has several empty boxes). The MySpace page, it seems, is already HTML so you can only hack into that. Suggested "tweaks" include incomplete HTML code (e.g., a <DIV> tag without a </DIV> tag to supress certain sections) and stylesheet pieces that you can "place anywhere" (meaning somewhere on your edit profile page). And the best one is that sites that offer layouts say, "Layout Code - Copy and Paste the code at the bottom of your 'I'd Like to Meet' Section!"
This cannot possibly be this lame, can it?
Is there any coherent guide to customizing MySpace pages for programmers/HTML designers? Is there a coherent DOM (including things like .contactTable etc.)? Could it be that all the tweaks are just hacks people have figured out from looking at the generated HTML?
Thanks!
This shouldn't be too hard if you whip out Firebug and do a bunch of "Inspect > click on page > edit CSS in Firebug's editor" work to see what you can learn about the structure of the page. Then mock it up to roughly how you want it and note down which elements and which styles need work and figure out how to get that set up in the profile editor.
Try approaching this from the point of view of a challenge. On the upside, MySpace allows you access to the DOM so you can screw with all sorts of things. On the downside, their choice of HTML composition is somewhat arguable.
You hit the nail on the head with your final question. The MySpace DOM is a disgusting set of nearly-infinitely nested tables. Normally, people edit the page by finding those sites that let you "cut and paste" and use their generated CSS since they've already done the hard work for isolating the proper elements.
Good luck... unfortunately, you are really going to need it. =/
Your fears are correct. MySpace "customization" is a bunch of hacks. Good luck.
You can a lot of information in this link: http://spiff-myspace.blogspot.com/
I think the same of the others answers: customize MySpace page is a difficult and complex task.
Regards,