Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Actually i am trying to create Animated Banner Ads, same like this...
https://adwords.google.com/aw_displayads/creatives/ExternalPreview?hl=en_US&ad=216127501651&adGroup=50971776412&ocid=141653320&isObfuscatedOcid=false&showMulPreview=true&showVariations=true&creativeType=19&pk=null&sig=ACiVB_ywiD3ua55vbxNzKFKx8nZYtGWJPw
Please guide me how to do this, i have PSDs and need to convert them in Animated Banner Ads HTML.
and also make sure the ads are google adwords compliant and have a working link.
I managed to bring up the page. Most likely you got downvoted because of the vagueness in your "question."
I'm not sure if there are any guides on this particular topic, but I'll let you know how you create a similar effect.
Let's first discuss the elements on the page.
A picture
Some text, "Your social work..."
Learn more button
Blue boxes coming in from the left/right
Not many objects in here. Most likely they are all contained in a single div. In that div, we can assume there is the following:
Background image
6 child Divs for the blue boxes
Another child div for the text "your social work..."
Another child div for the "learn more" button (which is not really a button)
The whole div itself is a link, so that's pretty easy. This should take about 5 minutes to replicate, but here is the overall structure we're looking at:
<a href="www.somelink.com">
<div>
<div></div> // 6 blue boxes
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><p>Your social work...</p></div> // text
<div>Learn More</div> // Fake button
</div>
</a>
Essentially, this is your HTML structure. You can just add transitions/animations to the child elements to gain the effect you see there on the example page you have. You would use transition-delays and animation-delays.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 days ago.
Improve this question
I am making a portfolio website, and I want to somehow set up something that fades the background from the previous page into the new background of the page you're on. I figured I could store the background color of the page somehow, then when you open a new page it reads the data from the previous page and sets the value initial value of a CSS background animation, then and make the final value of the animation the background color I want it to fade into, making a background fade effect. Sorry if I explained this poorly, please ask me if you want me to clarify something. Also, I am trying to make a website without JavaScript, which might make this impossible, so if it's only possible with JavaScript please help me anyway. Thank you so much!
I tried looking up a solution, but I couldn't find anything.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to create a site like this on WordPress where you have multiple slides (the navigation on top call the different slides) that fade in/out based on which link is clicked by the user. I'm looking for some input as to how I should go about it in an efficient way. Would I be calling these separate slides through Ajax? Should I just preload all of the images together and include them all in one html file? Advice would be appreciated.
Some questions you need to ask yourself that may impact the best way to do things.
How fast are slides going to be navigated? How "big" are the slides data-wise. How many slides are there?
If there are many, large slides it would probably be in your best interest to lazy load some of the later content.
If there are few, small slides the opposite might be true.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like some guidance / ideas for the following problem: How can someone lock the scrolling of a web page in order to present content to the user in a specific sequential way? For example, I would like a web page to have 3 sections, and with an onclick to scroll to a specific section id_1, then with another on click to scroll to section id_2 etc., but only with the onclicks to do that scrolling and prevent the user to scroll by himself with his mouse or with the scroll bars. Thanks!
If these are your specs you absolutely have to follow, which I highly recommend against anyway, you could just make each section stretch to fill the screen and make them fixed. Then provide a button to toggle in between the different sections.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I am working on a website and I am having troubles telling google not to index one <div> which is normally hidden (display: hidden;) on load because it is a popup (login popup). It is really bad when login popup goes right after tag because I usually store all popups at the beginning of body so content of it goes to description of my website in google search.
Do you have any ideas how can I hide it from google (maybe via javascript)?
EDIT: Thank you guys, you gave me a great solution with googleoff/on!
I thnk this is what you're looking for
http://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
<div>This is normal (X)HTML content that will be indexed by Google.</div>
<!--googleoff: index-->
<div>This (X)HTML content will NOT be indexed by Google.</div>
<!--googleon: index>
Go through this link (Tell Google to Not Index Certain Parts of Your Page: may be helpful) : http://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
put the div farther down (aka at the end) in the content and use css to position it where you want it when visible.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a list of user posts on a page and there is an icon in the top right of each post. When the user hovers over the icon I want to display additional info about the post, e.g. date, time, author, etc.
I want to display the additional information in an overlay of some kind, and I'm wondering if I should use a jQuery dialog widget or just some javascript. I don't think jQuery tooltips will do the trick, because some of the details are quite long.
Some specifics:
The details should show on hover and disappear when the pointer moves away
The overlay does not need to be modal. It does not require a title bar.
It should appear at the current location of the pointer and should automatically size to fit the content
So, should I be looking at the jQuery dialog widget? Or simply a javascript solution?
Thanks..!
A temporal, non-modal dialog positioned next to the user's cursor is effectively a tooltip. I'd check out one of the more advanced jQuery tooltip plugins like qTip2. It can accomodate many different types of content (images, paragraphs, videos) and is great at scaling to fit large content.
The AJAX example on the demo page should be of particular interest to you.
Good luck!