zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Linie ziehen zwischen <Div> ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.12.2012, 11:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2012
Beiträge: 3
Leroy befindet sich auf einem aufstrebenden Ast
Standard Linie ziehen zwischen <Div> ?

Hallo,
ich habe eine etwas ungewöhnliche Frage.
Kann man automatisch Linien ziehen lassen vom Browser,
zwischen <DIV> Containern ?

Mir geht es darum :
Stellt Euch einen kleinen Stammbaum vor in dem man auf die
einzelnen Bilder klicken kann umd dort dann eine Galerie sieht.
Da ja mal jemand heiratet etc, muß ich jemanden hinzufügen,
würde ich "Bilder" als Striche einbauen, würde das im Chaos enden.

Hier ein Beispiel :
(Sind nur Platzhalter Bilder )
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.12.2012, 12:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.963
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Leroy Beitrag anzeigen
Hallo,
ich habe eine etwas ungewöhnliche Frage.
Kann man automatisch Linien ziehen lassen vom Browser,
zwischen <DIV> Containern ?
Nein. Du kannst zwar horizontale und vertikale Linien simulieren, aber die Diagonale geht nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.12.2012, 12:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Man kann schon auch Elemente drehen und dadurch Diagonalen erzeugen, aber das wäre hier irgendwie totaler Pfusch
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 05.12.2012, 12:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

Meinst du vielleicht so was :
Drawing Diagonal Lines with CSS « Stories For Sad Robots

Rico
Mit Zitat antworten
  #5 (permalink)  
Alt 05.12.2012, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2012
Beiträge: 3
Leroy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Rico Beitrag anzeigen
Ja so was in der Art habe ich gesucht,
kleiner Haken an der Sache ist nur die wechselnde Positionsangabe.
Ideal wäre wenn er sich die "holen" würde durch zb eine ID
und die Linie darauf hin selber "zeichnet"
Mit Zitat antworten
  #6 (permalink)  
Alt 05.12.2012, 12:38
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.963
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Rico Beitrag anzeigen
Da habe ich einen längeren Moment gebraucht um es zu verstehen, aber dann ist es genial.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.12.2012, 13:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.12.2012
Beiträge: 3
Leroy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
aber dann ist es genial.
Ja, der Ansatz ist gut, wie gesagt es bleibt nur das Positions Problem für mich
Mit Zitat antworten
  #8 (permalink)  
Alt 05.12.2012, 18:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

Lies die Kommentare zum Link. In CSS 3 scheint es weitere Möglichkeiten zu geben. Ich habe sie nicht geprüft (und auch nicht verstanden).

Rico
Mit Zitat antworten
  #9 (permalink)  
Alt 05.12.2012, 18:46
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.963
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

das ist im Prinzip Heikos Vorschlag:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
  <head>
    <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.line{
	Transform: rotate(10rad);
	border-bottom: 1px solid black;
	position:absolute;
	top:150px;
	width:10%;
</style>
  </head>
<body>

<div class="line"></div>
</body>
</html>
Da muss man dann aber einige trigometrische Berechnungen vornehmen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.12.2012, 14:02
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.963
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das hat mich beschäftigt und um meine verrosteten Trigometrie Kenntnisse etwas aufzufrischen habe ich das mal mit JS umgesetzt.

Das ist eine Alphaversion!
Funktioniert mit FF 17, Chromium 18 und Opera 12 unter Xubuntu.

Um eine Linie von A nach B zu ziehen ist folgender Aufruf nötig:
Code:
var p1 = new Pt(230, 220);
var p2 = new Pt(50, 120);
DrawLine(p1, p2, 'green', 2);
und hier mal eine Beispiel mit vollständigen Code:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
  <head>
    <title> DrawLine</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<script type="text/javascript">
window.onload = function() {
	var p1 = new Pt(230, 220);
	var p2 = new Pt(50, 120);
	DrawLine(p1, p2, 'green', 2);
	
	var p1 = new Pt(230, 220);
	var p2 = new Pt(350, 320);
	DrawLine(p1, p2, 'green', 2);

	var p1 = new Pt(230, 220);
	var p2 = new Pt(150, 320);
	DrawLine(p1, p2, 'green', 2);

	var p1 = new Pt(230, 220);
	var p2 = new Pt(150, 120);
	DrawLine(p1, p2, 'green', 2);
	
	var p1 = new Pt(230, 220);
	var p2 = new Pt(350, 120);
	DrawLine(p1, p2, 'green', 2);
};

function DrawLine(from, to, color, width, style){
	var transform;
	var d = window.document;
	var out = createDiv('out');

	document.body.appendChild(out);
	
	// found the transform method
	['transform', 'webkitTransform', 'mozTransform', 'oTransform'].forEach(function(item) {
		if(item in out.style) {
			transform = item;
		}
	});
	if(!transform) throw new TypeError('your browser don\'t supoort transform.');

	// debug
	var tmp;
	document.body.appendChild(Dot(to.Y, to.X));
	document.body.appendChild(Dot(from.Y, from.X));

	tmp = createDiv();
	document.body.appendChild(tmp);
	setPos(tmp, to);
	tmp.innerHTML = to;
	
	tmp = createDiv();
	document.body.appendChild(tmp);
	setPos(tmp, from);
	tmp.innerHTML = from;
	
	// end debug
	
	var y = Math.abs(from.diff(to).Y) + 'px ';
	var x = Math.abs(from.diff(to).X) + 'px '
	
	if(!color) color = '#000';
	if(!width) width = 1;
	if(!style) style = 'solid';
	out.style.borderBottom = style + ' ' + color + ' ' + width + 'px';
	
	var c = from.dist(to); // hyphothenuse
	var b = from.diff(to).Y; // Gegenkathete
	var alpha = Math.asin(b/c);

	if(from.diff(to).X < 0 ){
		alpha = Math.PI - alpha;
	}

	out.style.width = c + 'px';
	out.style[transform] = 'rotate(' + alpha + 'rad)';
	
	var dy = Math.sin(alpha) * c / 2 ;
	var dx = c / 2 - Math.cos(alpha) * c / 2 ;
	
	setPos(out, from.add({Y: dy, X: -dx}) );


	// set position 
	// @param element
	// @param object(X, Y)
	// @param top, left
	function setPos(){
		var el = arguments[0];
		if(!el) return;
		
		if(!arguments[1]) return;
		var top, left;
		
		if(typeof arguments[1] === 'object') {
			top = arguments[1].Y;
			left = arguments[1].X;
		} else {
			top = arguments[1];
			left = arguments[2];
		}
		el.style.top = parseInt(top) + 'px';
		el.style.left = parseInt(left) + 'px';
		return el;
	}
	function createDiv() {
		var el = d.createElement('div');
		el.style.margin = el.style.padding = 0;
		el.style.position = 'absolute';
		el.style.border = 'none';
		return el;
	}
}
// Hilfsfunktionen
function isNumberOrZero(arg) {
	return (typeof arg === 'undefined' || isNaN(arg)) ? 0 : arg;
}
function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]';
}

function Pt() {
	this.reset();
	this.set(arguments[0], arguments[1]);
}

Pt.prototype = {
	toString: function() {
		return 'Pt(X=' + this.X + ', Y='+ this.Y + ')';
	},
	reset: function() {
		this.Y = null;
		this.X = null;
		return this;
	},
	set: function() { // y, x
		if(typeof arguments[0] === 'undefined') return;
		
		if(typeof arguments[0].X === 'number'){
			this.Y = isNumberOrZero(arguments[0].Y);
			this.X = isNumberOrZero(arguments[0].X);
			
		}else if(isArray(arguments[0])){
			this.Y = isNumberOrZero(arguments[0][0]);
			this.X = isNumberOrZero(arguments[0][1]);
		}else {
			this.Y = isNumberOrZero(arguments[0]);
			this.X = isNumberOrZero(arguments[1]);
		}
		return this;
	},
	add: function(pt) {
		this.Y += pt.Y;
		this.X += pt.X;
		return this;
	},
	sub: function(pt) {
		this.Y -= pt.Y;
		this.X -= pt.X;
		return this;
	},
	equal: function(pt) {
		return pt.Y === this.Y && pt.X === this.X;
	},
	isNull: function() {
		return this.Y === null && this.X === null;
	},
	diff: function(pt) {
		return new Pt((pt.Y - this.Y), (pt.X - this.X));
	},
	dist: function(pt) {
		var dx = Math.abs(pt.X - this.X);
		var dy = Math.abs(pt.Y - this.Y);
		return Math.sqrt(dx * dx + dy * dy);
	}
};

function Dot(top, left){
	var dot = document.createElement('span');
	dot.style.padding = dot.style.margin = 0;
	dot.style.border = 'none';
	dot.style.position = 'absolute';
	dot.style.display = 'inline';
	dot.style.backgroundColor = 'red';
	dot.style.width = dot.style.height = '2px';
	dot.style.overflow = 'hidden';
	
	dot.style.top = top + 'px';
	dot.style.left = left + 'px';
	return dot;
}
</script>
</body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mannigfaltige Probleme mit einer gepunkteten Linie zwischen Absätzen! landau66 CSS 1 10.06.2009 17:12
kleine linie zwischen content Jens.K CSS 6 05.06.2008 09:12
css - Linie oben wird statt gepunktet gestrichelt dargestellt Agnes CSS 2 19.11.2007 15:58
Linie zwischen Tabellen(-zellen) grischa_sgd CSS 28 23.10.2007 16:22
Vertikale Linie zwischen zwei Spalten RalfEggert CSS 13 08.07.2004 16:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:45 Uhr.