I am using a css gallery very much alike this one(or at least I took the idea of it, but problem is the same):
https://codepen.io/huijing/pen/GvNLJm
This is nothing exciting but a nice idea and working very nicely without the need of any bloated code or (js) script.
However, one thing is bothering me a bit- opening an image it always triggers the back function of the browser, which is a bit annoying, because using the back button after clicking through images just re-opens the images instead of going back to the page before. Not surprising considering it's using links though.
Basically it's just opening image links like this:
<ul class="slides">
<li id="slide1"><img src="lw1.jpg" alt="" /></li>
...
</ul>
and is showing them in a flex container.
But is there a way to suppress the back button event there? I am sure there must be ways using javascript but I'd love to stay on the pure html/css side if possible.
I'm afraid this is not possible, but maybe I missed something?
Related
Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201
It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!
Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem
I wanted to add an Google CSE to the gitbook instead of the normal search engine.
It's no problem to add the GCSE to the gitbook, only the result is weird.
If I go directly to a page I can see the Search Box and can use it normally. If I look at the code there is a div: <div id="__gcse_0">.
If I now go through another chapter the Search Box disappears and there is another div instead of the previous in the code: <gcse:search>.
After I refresh the page the box appears again. This happens on Firefox and Chrome.
Do somebody know what the problem might be?
I've been trying to figure out this same issue... So far, I can only get it to stay by placing the google script into an overriding layout.html - but this is not recommended, and it isn't ideal for most placements. I've also noticed that the CSS that is loaded through the script then gets lost when switching pages (like the script itself was previously) so this solution would also be a pain to re-add all the css files. So it's a super messy solution, and hopefully some one has a better solution out there.
When you put a google map and a plus one button on the same page it seems to create some strange rendering issues. In these examples WITH and WITHOUT the plus one button. If you click on a marker it will zoom in on it, then hit reset to zoom back out. You'll see the map doesn't render when the buttons included till you zoom in and out manually. Why? Anyone know a way around this?
EDIT: This issue seems to only happen in Google Chrome...IRONY!
Both worked fine for me in Firefox 6. In IE9 the google +1 button didn't even show up at all. No surprise there, really, although it should work. That might be, however, because you don't have fully valid HTML in your test document (with html and body tags). You might want to try that first.
You can also try using the HTML 5 tag for the google plus one button. I feel that is a safer alternative and it is fully HTML5-valid:
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="250" ></div>
Check out the +1 Button Reference under "+1 Tag Attributes" for a complete list of possible attributes
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).
Hi I have been trying to do this for what feels like all my life
I have a list menu with block display links, each link has a sliding doors png background image. I have used this javascript (http://www.ideashower.com/our_solutions/png-hover/) to implement the alphaimageloader fix for ie6 using a transparent gif.
When I test it for the first time it works but if I click to a different page and then click back it doesn't work anymore - the menu completely disappears, I can get it to work again by duplicating the transparent gif and changing it's name, but again if I go to another page and then come back to it, it stops working and the menu dissappears.
Is this a server caching issue or something like that.
Any thoughts on this would be much appreciated!
Thanks
If its caching then maybe the AJAX trick could do.
Create random number each time the code is executed and add it to the transparent gif url.
so in file pngHover.js:
transparentImage =
'/j/transparent.gif';
would be
transparentImage = '/j/transparent.gif?143253214';
To get random number in js google it, it will give you plenty./