Div Nur Bei Bestimmter Auflösung Anzeigen

Div Nur Bei Bestimmter Auflösung Anzeigen ab 1024 px breite

#1 Nigg

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.344
Beigetreten: 19. Mai 04
Reputation: 14
Geschlecht:Männlich

geschrieben 01. Juli 2008 - 15:04

Hallo,

ich suche eine Möglichkeit, einen Layer nur anzuzeigen wenn das Browserfenster eine bestimmte Größe in der Breite aufweisen kann, bzw. der Monitor selbst. Hat dafür jemand JavaScript-Code oder etwas ähnliches zur Hand? Konrekt geht es um ein div am rechten Rand welches bei 800 x 600 or so nicht zu sehen sein soll. Google liefert mir gerade irgendwie nur Mist .. oder ich suche falsch.

npm - nginx php mysql

Wenn dir kalt is, geh in eine Ecke, da sind meist 90°

Nach oben
Nach oben of the page up there ^

#2 ps915

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.119
Beigetreten: 17. Mai 07
Reputation: 0
Geschlecht:Männlich

geschrieben 01. Juli 2008 - 15:19

Man kann per JS die Breite herausbekommen:

<script LANGUAGE="JavaScript">
var breite = screen.width;
</script>

<?php

if($breite > 800){
echo "<div> TEXT </div>";
}
?>

Habe es nun nicht getestet aber so müsste es doch gehen oder

EDIT: Kann nicht gehen da die Variable nicht von JS zu PHP übergeben wird. Du kannst sie aber an die URL hängen, glaube aber dass das nicht ist was du meinst.

Wir suchen jetzt also jemanden der uns sagen kann wie man die Variable übergeben kann, da ich mich mit JS nicht so gut auskenne!

Dieser Beitrag wurde von Toasterfraktion bearbeitet: 01. Juli 2008 - 15:29

Deutsches Raspberry Pi Forum
Ein vollwertige Linuxbox mit Ethernet, Hdmi und USB in der Größe einer Kredidkarte für knapp 30 Euro!

Nach oben
Nach oben of the page up there ^

#3 Iso

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 487
Beigetreten: 14. Mai 03
Reputation: 0
Wohnort:Hörstel
Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. Juli 2008 - 16:23

In Javascript kann man per DOM Elemente in ein HTML Dokumen einfügen, siehe http://aktuell.de.selfhtml.org/archiv/doku...#create_element oder das gewünsche Element default per CSS auf visible hidden setzen und dann per JS ändern.

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3

Nach oben
Nach oben of the page up there ^

#4 Nigg

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.344
Beigetreten: 19. Mai 04
Reputation: 14
Geschlecht:Männlich

geschrieben 01. Juli 2008 - 16:34

@Toasterfraktion: Jo das geht definitiv nicht :thumbup:

Die Option von Iso würde mir aber schon reichen:

@Iso:
wie kann ich das CSS element per JS aktivieren?

<script type="text/javascript">
if (screen.width>700)
{
document.all.moepmoep.style.setAttribute("visibility", "visible", false);
}
</script>

geht wohl so nicht

Dieser Beitrag wurde von Nigg bearbeitet: 01. Juli 2008 - 17:37

npm - nginx php mysql

Wenn dir kalt is, geh in eine Ecke, da sind meist 90°

Nach oben
Nach oben of the page up there ^

#5 Diewie

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 409
Beigetreten: 18. Juni 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Geisenhausen / München

geschrieben 01. Juli 2008 - 17:42

Hi,

mit visibility hast du aber einen unsichtbaren Platzhalter an der Stelle, wenn es nicht angezeigt wird. Wenn du das nicht willst, verwende besser display.

Wie man es mit JS sichtbar machen könnte:

document.getElementById("moepmoep").style.visibility = "visible";

oder mit display:

document.getElementById("moepmoep").style.display = "block";

Gruß,
Stefan

Nach oben
Nach oben of the page up there ^

#6 Nigg

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.344
Beigetreten: 19. Mai 04
Reputation: 14
Geschlecht:Männlich

geschrieben 01. Juli 2008 - 18:00

irgendwas ist bei meinem JS murks -.- ich bin aber zu blöde das zu debuggen

npm - nginx php mysql

Wenn dir kalt is, geh in eine Ecke, da sind meist 90°

Nach oben
Nach oben of the page up there ^

#7 Diewie

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 409
Beigetreten: 18. Juni 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Geisenhausen / München

geschrieben 01. Juli 2008 - 18:05

Zitat (Nigg: 01.07.2008, 19:00)

irgendwas ist bei meinem JS murks -.- ich bin aber zu blöde das zu debuggen

Dann poste doch einfach mal den entsprechenden Code mit allem drum und dran, dann schauen wir uns das an.

Gruß,
Stefan

Nach oben
Nach oben of the page up there ^

#8 Nigg

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.344
Beigetreten: 19. Mai 04
Reputation: 14
Geschlecht:Männlich

geschrieben 01. Juli 2008 - 18:10

naja, ist ja im Prinzip das von oben, fehlt da eine Funktion?

#blubblubb {
	position:absolute;
	width:200px;
	height:605px;
	z-index:9;
	left: 924px;
	top: 38px;
	display:none;
}

<script type="text/javascript">
if (screen.width>700)
{
document.getElementById("Blubblubb").style.display = "block";
}
</script>

beherrsche das leider überhaupt nicht.

Dieser Beitrag wurde von Nigg bearbeitet: 01. Juli 2008 - 18:11

npm - nginx php mysql

Wenn dir kalt is, geh in eine Ecke, da sind meist 90°

Nach oben
Nach oben of the page up there ^

#9 Diewie

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 409
Beigetreten: 18. Juni 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Geisenhausen / München

geschrieben 01. Juli 2008 - 18:29

Habe kurz mal ein Minimalbeispiel erstellt. Wenn die Seite geladen ist, dann wird das JS ausgeführt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minimalbeispiel</title>

<style type="text/css">
<!--
div#layer {
	display: none;
}
-->
</style>

<script type="text/javascript">
var show_layer = function() {
	if (screen.width > 700) {
		document.getElementById("layer").style.display = "block";
	}
}
</script>
</head>

<body onload="show_layer()">
<div id="layer">Test</div>
</body>
</html>

Gruß,
Stefan