As you can see in the screenshot I have attached, I am not able to make this post list in responsive mode.
I don’t know but somehow it is showing image in mobiles as in attached screenshot.
I suggest you use a minimal CSS framework, which helps you position your objects through a grid. There are many of those frameworks, but i suggest you check out miniCSS, iota or chota for a start.
Related
I want to show some image in a flash. When I click an image, the image is up as like as image shown below.
when i click the image:
but the problem is when i click the image in that group, there is a gap between images. I want to attach them. I can not solve the problem. please anybody help me to solve the problem.
If you're using Flex, this is fairly trivial. You set the cards in an HGroup (calculating the gap will be difficult, but not impossible) and simply remove selected cards from that group and place them in another. After the card is removed, your other cards will be realigned by the layout automatically.
If you're not using Flex, I suggest extracting the code you used to layout the cards in the first place into a separate function. When a card is selected, you move the card out of the DisplayObjectContainer it is currently in and place it in another and then simply call the layout function again. This is the same method as I would use with Flex, although a little less automated due to the lack of Flex's layout engine.
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
I dont know what kind of success i'll have from this post but struggling at the moment to get a reply on the rockettheme forums.
I have downloaded this template (Kinetic) from Rockettheme.com (demo below;)
http://demo.rockettheme.com/?template=kinetic
I have changed it to come out looking like the link below;
http://evolve.gen.nz/
However im really struggling to differentiate the footer from the rest of the website. Im looking at changing it to a light grey however I cannot make it stretch right across the website as the footer is located in the container and stops at either edge of the container.
is there anyway to make a footer colour go right across the page?
(the same as the following website, if you go down to the bottom of the page and you will see a dark grey, charcoal colour)
http://www.colmanweb.co.nz/websites/refuge/
Any ideas on how I could get this achieved?
Thanks
You just need to edit the index.php file of the template, should be at templates/kinetic/index.php roughly. If you head to the bottom, you will find a div with rt-footer. You will want to pull this entire div statement out and paste it outside of the div with an id rt-surround. Your best bet is to find rt-debug and paste it just above.
I run a lot of sites off the base gantry template from Rocket Theme and do this type of thing often, so it should work.
Two issues you may run into. If you don't get the right closing div tag, you can get some weird output if the divs aren't closed properly. So be careful and use the indentation to help you.
Second, there may be some css styling that is specific to the old heirarchy. I doubt it in this case, but it can happen. You may have to fix some of the css styling.
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
am looking to prototype the UI for an windows application. The app will be deployed on several display devices with different (physical) screen sizes and aspect ratios. Would like to be able to generate scenarios optimized on one display and quickly check if the layout is OK on different screen sizes, orientations. That is, I'd like to prototype one set of scenarios and "automatically" generate the same scenarios on different screens. Have superficial knowledge of MS Sketchflow. Have seen some best practices at http://www.wpftutorial.net/LayoutProperties.html#best . Am wondering if folk can advise on best practices to follow in sketchflow.
Bye
To quickly be able to check how things will look, I have 2 possible suggestions:
Use the states panel to create a state group/states that change the size of the layout container (such as layoutroot) you are working with. Then in the sketchflow player, you can select the state from the navigation menu and see how it looks.
Use a ChangePropertyAction behavior from the asset panel attached to a button. You can set the height or width to the size you want. If you use 2, you can set both the height and width. This would give you the ability to control the layout size and see how it is rendered.
Hope that helps, let me know if you need more info.
Keep a consistent theme between the pages, kind of goes without saying.