javascript - HOver counter - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript onmouseover count

<< < 1 2 3 > >>

Bruger #12519 @ 22.04.16 20:16

Kan nogen modificere denne en smule:

http://fiddle.jshell.net/WqeAD/

Jeg søger at den tæller hvor længe jeg holder over,
Når 10000 sek. er nået skal den gå til "index.php?pan=xy"

23 svar postet i denne tråd vises herunder
10 indlæg har modtaget i alt 20 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 22.04.16 21:35

1.223

kig på denne

Kode

var counter = 0;
var myInterval = null;
$(document).ready(function () {
	$("div").hover(function (e) {
		counter = 0;
		myInterval = setInterval(function () {
			counter++;
			// console.log(counter);
			if (counter > 10) { // 10 sekunder 
				// http://stackoverflow.com/questions/10636581/jquery-how-to-trigger-hover-out
				// http://stackoverflow.com/questions/503093/how-can-i-make-a-page-redirect-using-jquery
				window.location.replace("http://stackoverflow.com");
				$("div").trigger('mouseleave');

			}
		}, 1000); 
	}, function (e) {
		clearInterval(myInterval);
	});
});

Indlæg senest redigeret d. 22.04.2016 21:46 af Bruger #16075

Bruger #16075 @ 22.04.16 23:49

1.223

man kunne også bruge <tr data-value="1">
http://stackoverflow.com/questions/15211904/return-value-attribute-of-a-tr-tag

det blev den meget kønnere af

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <style type="text/css">            
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">            
			// http://stackoverflow.com/questions/15211904/return-value-attribute-of-a-tr-tag            
            var counter = 0;
            var myInterval = null;
            $(document).ready(function () {
                $("tr").hover(function (e) {
					var this_value = e.currentTarget.dataset.value;
                    counter = 0;
                    myInterval = setInterval(function () {
                        counter++;                        
						if (counter > 10) { // 10 sek                            
                            window.location.replace("http://" + this_value);
                            $("tr").trigger('mouseleave');
                        }
                    }, 1000); // skal være 1000 (1 sek)
                }, function (e) {
                    clearInterval(myInterval);
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr data-value="stackoverflow.com">
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr data-value="udvikleren.dk">
                <td>Feb</td>
                <td>$95</td>
            </tr>
            <tr data-value="eksperten.dk">
                <td>mar</td>
                <td>$105</td>
            </tr>
        </table>
    </body>
</html>

Bruger #16075 @ 22.04.16 23:12

1.223

du kan vel give hver td en id, og ligge alle dine url'er i et array

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <style type="text/css">            
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">            
            var url_s = Array("stackoverflow.com", "udvikleren.dk", "eksperten.dk");
            var counter = 0;
            var myInterval = null;
            $(document).ready(function () {
                $("tr").hover(function (e) {
                    var this_id = e.currentTarget.id; // tr_x

                    counter = 0;
                    myInterval = setInterval(function () {
                        counter++;                        
                        if (counter > 10) { // 10 sek
                            var i = this_id.replace('tr_', '');	// fjerner tr_, og har derved index i array,et
                            window.location.replace("http://" + url_s[i]);
                            $("tr").trigger('mouseleave');
                        }
                    }, 1000); // skal være 1000 (1 sek)
                }, function (e) {
                    clearInterval(myInterval);
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr id="tr_0">
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr id="tr_1">
                <td>Feb</td>
                <td>$95</td>
            </tr>
            <tr id="tr_2">
                <td>mar</td>
                <td>$105</td>
            </tr>
        </table>
    </body>
</html>

Bruger #16075 @ 23.04.16 08:27

1.223

Er det helt umuligt t tilføje en
var code=prompt("Indtast kode");

så man skal taste en kode inden som den tager med i url'en

det burde være rimelig nemt

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var counter = 0;
                var myInterval = null;
                $("tr").hover(function (e) {
                    var this_value = e.currentTarget.dataset.value;
                    counter = 0;
                    myInterval = setInterval(function () {
                        counter++;
                        if (counter > 10) { // 10 sek
                            var code = prompt("indtast coden");
                            if (code == null || code == "") { // der er ikke indtasted nogle code, null ved cancel, "" ved bare ok
                                window.location.replace(this_value);
                            } else {
                                // hvorfor kommer der et / på efter url'en, og før ?code=

                                // this_value = this_value	 + "?code=" + code;
                                // window.location.replace(this_value);
                                window.location.replace(this_value + "?code=" + code);
                                // window.location.href = this_value + "?code=" + code;
                            }
                        }
                    }, 1000); // skal være 1000 (1 sek)
                }, function (e) {
                    clearInterval(myInterval);
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr data-value="http://stackoverflow.com">
                <td>Jan</td>
                <td>$100</td>
            </tr>
            <tr data-value="http://udvikleren.dk">
                <td>Feb</td>
                <td>$95</td>
            </tr>
            <tr data-value="http://eksperten.dk">
                <td>mar</td>
                <td>$105</td>
            </tr>			
			<tr data-value="https://www.google.dk">
                <td>apr</td>
                <td>$91</td>
            </tr>
			
        </table>
    </body>
</html>

Bruger #16075 @ 24.04.16 21:42

1.223

Det er samme "<table>"
men hver sin "<tr>"

hvad adskiller denne tr fra de andre ??
har den en class eller mangler den noget feks en class
eller mangler en data.value ??

tilføjet 2016-04-24 kl 22:00

kiggede hurtigt på denne link
http://stackoverflow.com/questions/4614120/not-class-selector-in-jquery

man kan give den en class og sige den ikke skal have denne class

<tr data-value="xxxxxx" >
$("#tbl_1 tr").hover(function (e) {

bliver til

<tr data-value="" class="no">
$("#tbl_1 tr").not(".no").hover(function (e) {

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var counter = 0;
                var myInterval = null;
				// http://stackoverflow.com/questions/4614120/not-class-selector-in-jquery                
				$("#tbl_1 tr").not(".no").hover(function (e) {                    
                    counter = 0;
                    myInterval = setInterval(function () {
                        counter++;
						console.log(counter);
                        if (counter > 10) { // 10 sek
                            var this_value = e.currentTarget.dataset.value; // henter først værdien når den skal bruges
							var code = prompt("indtast coden");
                            if (code == null || code == "") { // der er ikke indtasted nogle code, null ved cancel, "" ved bare ok
                                window.location.replace(this_value);
                            } else {
                                // hvorfor kommer der et / på efter url'en, og før ?code=

                                // this_value = this_value	 + "?code=" + code;
                                // window.location.replace(this_value);
                                window.location.replace(this_value + "?code=" + code);
                                // window.location.href = this_value + "?code=" + code;
                            }
                        }
                    }, 1000); // skal være 1000 (1 sek)
                }, function (e) {
                    clearInterval(myInterval);
                });
            });
        </script>
    </head>
    <body>
        <table id="tbl_1">
            <tr data-value="http://stackoverflow.com">
                <td>Jan</td>
                <td>$100</td>
            </tr>
            <tr data-value="http://udvikleren.dk">
                <td>Feb</td>
                <td>$95</td>
            </tr>
            <tr data-value="" class="no">
                <td>mar</td>
                <td>$105</td>
            </tr>			
			<tr data-value="https://www.google.dk">
                <td>apr</td>
                <td>$91</td>
            </tr>
			
        </table>
		
		
		
    </body>
</html>

Indlæg senest redigeret d. 24.04.2016 22:01 af Bruger #16075

Bruger #16075 @ 25.04.16 09:22

1.223

der er er top med info om underståendene.
så kommer dataen
og til sidst et SUB Total.

hvilke linjer er det den IKKE skal tælle på ??
hvilke linjer SKAL den tælle på ?? (hvis det er nemmere at angive)

jeg kan se på din code du gengruger dine id'er

<tr id="tbl_2" data-value="?payed=3286796">
<tr id="tbl_2" data-value="?payed=3287052">
....
det må man ikke, da en id SKAL være unik på siden

mon ikke du kan bruge class="doubleUnderline"> til noget ??
$("tr").not(".doubleUnderline").hover(function (e)

på min code vist tidligere kunne man også overveje at sætte en class (yes_count) på dem der skal tælle

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>demo</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var counter = 0;
                var myInterval = null;				
				// på den id der hedder #tbl_1 der har en tr der ikke indeholder classen no_count gør dette
				//$("#tbl_1 tr").not(".no_count").hover(function (e) {                    
				
				// på den id der hedder #tbl_1 der har en tr med classen yes_count gør dette
				$("#tbl_1 tr.yes_count").hover(function (e) {                    
                    counter = 0;
                    myInterval = setInterval(function () {
                        counter++;
						console.log(counter);
                        if (counter > 10) { // 10 sek
                            var this_value = e.currentTarget.dataset.value; // henter først værdien når den skal bruges
							var code = prompt("indtast coden");
                            if (code == null || code == "") { // der er ikke indtasted nogle code, null ved cancel, "" ved bare ok
                                window.location.replace(this_value);
                            } else {
                                // hvorfor kommer der et / på efter url'en, og før ?code=

                                // this_value = this_value	 + "?code=" + code;
                                // window.location.replace(this_value);
                                window.location.replace(this_value + "?code=" + code);
                                // window.location.href = this_value + "?code=" + code;
                            }
                        }
                    }, 1000); // skal være 1000 (1 sek)
                }, function (e) {
                    clearInterval(myInterval);
                });
            });
        </script>
    </head>
    <body>
        <table id="tbl_1">
            <tr data-value="http://stackoverflow.com" class="yes_count">
                <td>Jan</td>
                <td>$100</td>
            </tr>
            <tr data-value="http://udvikleren.dk" class="yes_count">
                <td>Feb</td>
                <td>$95</td>
            </tr>
            <tr data-value="" class="no_count">
                <td>mar</td>
                <td>$105</td>
            </tr>			
			<tr data-value="https://www.google.dk" class="yes_count">
                <td>apr</td>
                <td>$91</td>
            </tr>			
        </table>		
    </body>
</html>

Bruger #16075 @ 25.04.16 15:24

1.223

Det er ikke id
det er en key jeg har bygget til den.

id="tbl_2" er da id'er

"2016 - Januar" - (Skal virke)
"2016 - Febuar" - (Skal virke)
"2016 - Marts" - (Skal virke)
"2016 - April" - (Skal virke)
"..." - (De kommendene - Skal virke)

kig på mit eks oven for og sæt en class på dem det skal virke på

nb:
prøv at validerer din html code igennem https://validator.w3.org/
https://validator.w3.org/check?uri=http%3A%2F%2Fline-web.dk%2Flg18%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Bruger #16075 @ 25.04.16 16:53

1.223

nu har du givet hver tr hver sin id, og sat en class (yes_count) på.

men du mangler at rette din selector, ellers er det kun dem i <tr id="tbl_1" .. > du rammer

denne
$("#tbl_1 tr.yes_count").hover(function (e) {

skal se sådan ud
$("tr.yes_count").hover(function (e) {

dvs du skal fjerne id fra din selector

prøv at læse om selectors
https://api.jquery.com/category/selectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/jquery_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

Bruger #16075 @ 25.04.16 21:01

1.223

du har skrevet
$("#tr.yes_count").hover(function (e) {

skal være
$("tr.yes_count").hover(function (e) {

fjern # også

# = id
. = class
tr er element tag

så oversat betyder vælg på element taget tr der har classen yes_count når du hover over dette udfør functionen

Bruger #16075 @ 25.04.16 22:28

1.223

Hvordan undgår jeg så at den reagerer på Annuller i koden?

det er denne stump code du skal kigge på

Kode

if (code == null || code == "") { // der er ikke indtasted nogle code, null ved cancel, "" ved bare ok
	window.location.replace(this_value);
} else

der skal nok stå noget andet end,
window.location.replace(this_value);
eller måske skal linjen fjernes helt

men hvad vil du have der skal ske ??

og skal der ske det sammen ved både Annuller og blankt (intet indtasted bare tryk OK)

du kan starte med at udkommenterer linjen

så
window.location.replace(this_value);

bliver
// window.location.replace(this_value);

Indlæg senest redigeret d. 25.04.2016 22:29 af Bruger #16075

<< < 1 2 3 > >>

HOver counter

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler