First time post on StackOverFlow.com, a shame as I am considered to be a computer science student. First and foremost, thank you all so much for the help you have already provided me via other's inquiry answering my own questions. Today I have my own real question which like this post's title may be hard to understand. I however like a challenge.
</introduction>
ABSTRACT: Using the content of the website somethingmedia.co on the artist / philosophy pages; create a more user friendly display with special consideration of mobile devices.
METHOD: Alter blocked 'div' content to be virtually inline and allow side scrolling. Please visit here for a clear representation to [demo] and see below for explanation[a]
ALTERATION: While allowing for touch and hold sensitivity options as seen in [method] also allow the scrolling to occur with a mouse wheel. Please see [demo2] and visit explanation[b] below.
FUNCTIONALITY: In addition to the [method] and [alteration], allow scrolling to also occur upon users' movement of the pages scroll bar itself. Except (and here is the tricky part), make the scroll bar vertical, yet only move the content left and right. Scroll bar only visible on non mobile devices (i.e. PC / Laptops / Macintosh / etc).
CONCLUSION: I like making websites and though I have never taken a formal class for websites (since the 6th grade) I continue to learn new things based on what I find unique and interesting. Therefore, I am curious to know if there is a way to implement this design in a simple and elegant fashion. Though my computer science experience is limited to Java and Python in school, I have independent experience in CSS, HTML, Java Script and a bit of CGI. If you're up for the challenge with me I ask you: "What is my first step?"
</concept>
explanation[a]: code.comunicatek.com/en/tekslider_a_touch_focused_slider.html
explanation[b]: css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
The question's a little confusing, but assuming what you really mean is, "How can I have a page that uses vertical scroll bars to scroll the page horizontally," I'd try something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertizontal Scrolling</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#page-scroll').height($('#page-wrap').outerWidth());
$(window).scroll(function() {
$('#page-wrap').css('left',-1 * $(window).scrollTop());
});
});
</script>
<style type="text/css" style="display: none !important;">
#page-wrap {
position:fixed;
left:0;
top:0;
z-index:10;
}
#page-scroll {
z-index:1;
}
</style>
</head>
<body>
<div id="page-scroll">
<!--- intentionally empty --->
</div>
<div id="page-wrap">
<!--- really wide content goes here --->
</div>
</body>
</html>
Related
At the bottom of my page, there are four big square link tabs (called "individual", "group", "child" and "family"). Those tabs work fine on my desktop computer, but for some reason they don't work on iPad.
The strange thing is that when touching them on iPad, the hover effect functions but then nothing happens. What is going on with these links?
Here's the HTML of one of the four tabs:
<a href="https://www.mud-kings.com/events/individual/" id="a_price_li1">
<img src="http://www.mud-kings.com/wp-content/themes/mudkings/images/register_individual.png" id="register_individual" class="register_tab" style="display: block;">
<img src="http://www.mud-kings.com/wp-content/themes/mudkings/images/register_individual2.png" id="register_individual2" class="register_tab" style="display: none;">
</a>
With the following jQuery code attached to it:
jQuery('#a_price_li1').hover(
function () { jQuery('#register_individual').css('display','none'); jQuery('#register_individual2').css('display','block'); },
function () { jQuery('#register_individual').css('display','block'); jQuery('#register_individual2').css('display','none'); }
);
#drake035, I managed to find some similar questions (with answers) asked by other people with more or less the same problem. My suggestion would be take a look and see if the information provided in there solves your problem (since I have some doubts I will ask you bellow).
iPad hover/click issue
hover effect on a tablet (i.e. iPad)?
In order to be aware of the current situation, what kind of knowledge in web programming do you have?
What makes you think there is the problem only?
Greetings, Martin
Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?
I created a website that works quite nice but later went over to a friend's house and the website was disproportioned and almost hideous on his widescreen monitor. Without extensive rewriting of the website, is there perhaps a script that resizes my website for those on widescreen monitors, or other alternatives? Any suggestions besides "redo your website properly" welcome. Thanks!
EDIT:
Here is how my website should look like:
http://img843.imageshack.us/img843/4453/22425853.jpg
Here's how it appears on widescreen:
http://img851.imageshack.us/img851/7494/racism.jpg
It depends on how you did the layout. If you did not use absolute or fixed positiong, the simplest way could be to use a wrapper div around your content and give it a maximum width, like this
<body>
<div id="wrapper">
<!-- all the content goes here -->
</div>
</body>
and the CSS
#wrapper {
max-width: 960px;
margin: 0 auto
}
EDIT: If you do not have access to the HTML you can leave the CSS as shown and use this jQuery line (it should work but I have not tested it)
$('body').wrapInner('<div id="wrapper" />')
EDIT: I see you are not familiar with jQuery. Code that should be run only when the page is ready should be wrapped as follows:
$(function() {
$('body').wrapInner('<div id="wrapper" />');
});
Please let me know if that works for you. You can try
$('#wrapper').attr('id');
in the Firebug console to check that the wrapper div has been created.
Set a max-width in your css on the wrapper of the site.
How does the DiggBar work?
I'm trying to make an ASP.NET MVC DiggBar clone just for learning purposes and does anyone have a suggestion on how to specify the url of the content for the lower frame? How would you go about constructing that in MVC?
Also, I know that it is an iFrame, but how do they position it so regardless of scrolling it stays positioned at the top? Is it CSS magic?
Edit: I'm not interested in whether or not you like them. I am not putting one into production and I'm not asking for whether they are good design or not. I simply ~want~ to make one.
I find the DiggBar useful and I like it. Hell, you can turn it off in two clicks! Similarly, reddit has a reddit bar which is opt-in (probably better approach).
The basic html is:
<html>
<head>
<style type="text/css">
#toolbar {position: fixed; top: 0; height: 40px; width: 100%; ... }
#page {width: 100%; height: 100%;}
</style>
</head>
<div id="toolbar">
All your toolbar stuff here.
</div>
<iframe id="page" name="page" src="http://url.to/page" frameborder="0" noresize="noresize"></iframe>
</html>
You would have a slug on your own URLs that maps to the page's URL, e.g.
d1oKo3 => http://news.bbc.co.uk/2/hi/technology/7991708.stm
All your view would have to do is look up the mapping and put the page's URL into the iframe's src. Just make sure you have a way for users to opt out, as some people don't like this sort of toolbar.
It may well be a horrible blight on the interweb in your opinion but that wasn't what the man asked - why do you think anyone cares whether you think these tool bars should exist out there or not? no ones asking you to use em.
If you feel that they shouldn't then simply butt out and let someone else answer the question. After all if they really are so unpopular folk will vote with thier mice and go elsewhere and the sites that deploy them will dwindle to nothing. Thats whats so great about the web, it doesn't need impotent geeks dictating whats good and whats not folk can decide for themselves.
Happy coding your way.
First of all, please don't do something like that, I don't know anyone that likes those things.
Something can be kept at the top like that using the CSS:
position: fixed;
As for specifying the URL, I'm not sure exactly what you're asking. When you click on a link on digg now, the destination URL is something like this:
http://digg.com/d1oIyx
The "d1oIyx" would just be used as a primary key into a database where they're storing the URL to be loaded in the bottom iframe.
thanks , i found a solution that work ( attached ) , but how i make it full page iframe ?
working link : http://www.clalit.org/2.php?link=http://cnn.com
<?php
$link=$_GET["link"];
echo "<iframe src=\"$link\"/>";
?>