Search jQuery

jQuery Forum

Using jQuery

trebly

:Target and action on a fragment element when targetted from URI #fragment

in Using jQuery • 8 years ago

Hi,

Problem :

I try to do so that, when a fragment is reached from an URI inside a document, an event with a defined function should be activated on the "targetted fragment".

The reason for context : The function will adjust the position of the targeted fragment :

note : the top of window is occupied by a sticky menu and the auto scroll (by navigator) into the document sets the "targeted fragment at the top of window then it is hidden by the menu

With CSS : when from a link a URI list <a href="#fragment_id"> which points to <tag id="fragment_id">.....

a css defines : " #fragment_id:target { attribute... }" or .fragments_class:target { attributes...} will attrib attributes to current targeted #fragment_id.

This functions but the height of the top margin is not known, then JQ is the solution to make able to calculate the suitable position.

Tries

$(".fragment_class:target").focus( function{....} /* or .scroll doesn't function */
);
$("document").scroll (function () {
$(".fragment_class:target")....
}); /* will be activated at each scroll but not only if the element is focused after a target, anyway can make the UI unusable with to much events */

Summary : I have not found any good solution to :

Activate a function on an element (a fragment), defined by a selector, when it is reached (focused) by the activation of a link to the fragment.

This is valid for internal or external defined URls or auto by navigator when a reload (chrome, at reload, will position - target - on the previous element id) is performed

Do somebody can help me

Best regards

Trebly

Replies(5)

jakecigar

Re: :Target and action on a fragment element when targetted from URI #fragment

8 years ago

That :target stuff is not used very often in jQuery. But it is defined at :target Selector | jQuery API Documentation

But you don’t think you get a focus event. You get a hashChange event or a popState or pathChange…

Saner HTML5 History Management

JΛ̊KE

trebly

Re: :Target and action on a fragment element when targetted from URI #fragment

8 years ago

Hi,

The target selector selects elements that are currently targeted (it functions normaly) but the problem is :

To define to JQuery by an instruction like $(...:target).on(" ..events ...", function() {...} )

note : with this instruction JQ will first (at load : set event listener) and when event occurs activate the function.

The main question is :

When you have defined an element as fragment target (href="#fragment") which event do you raise when the link is activated.

The activation of the link generates various actions and you get a track of the effects but you don't get the fact generator.

Sometimes "focus" is raised but there are others cases in which "focus" is raised even the filter on target is set, these cases must not be taken in account by the treatment. We are going back to the question "how to know that the element has been the target of a link and don't activate anymore the function while a new action of same type has not been performed (I got the action by the link which have brought the element front, but the next click on the current page, because the element had still the focus had launched again the function...).

I am quite sure that I don't formulate the question in a right manner, because I do believe that it is a common question and problematic.

It is sure that another way is to attach a click event to the link, but this is wrong for performance we use too many events which already are been set by the href (any link has a click event and mouseover attached).

In another way the main aim is to update the content of the element before showing it (the parent can be focused but not the element), then the event should be "the element is going to be visible" (begin transition by css ?)

I have not found examples of code threatening such cases.

Best regards

Trebly

note : any question of this type is long because the author is trying to formulate in the best way a not already holded question, sometime after long experience which was not containing it.

jakecigar

Re: :Target and action on a fragment element when targetted from URI #fragment

8 years ago

$(...:target).on(" ..events ...", function() {...} )

Won’t ever work

$(document).on((" ..events ...",":…:target", function() {...} )

Might work if your ellipses are right.

JΛ̊KE

trebly

Re: :Target and action on a fragment element when targetted from URI #fragment

8 years ago

Hi,

It doesn't function in my configuration.

I agree with your sentence

Might work if your ellipses are right.

The event is not defined on the ...:target object while

$(window).hashchange ( function () { $("...:target).each( action) })

Can give an action if hashchange function is defined or

$(window).on ("hashchange", function (){})

if not and if the same event hole is not fired twice (I return on this at the end).

What are my progresses on the way

I uses jq 1.11.1 but not JQ mobile.

The navigator is the last version of Chrome.

The development is done on desktop (win7 pro) but must be portable to mobiles.

For now I test currently with Android Kitkat with chrome.

The context is WordPress for which I develop several plugins (and also TikiWiki).

With the debugger the hashchange is not kept (no target defined)

I have tested $(window).on("hashchange")
Not yet tested $(document).on("hashchange" , function () {.......})

A $(...).hashchange( ... ); locks on invalid and undefined function (the same with the event as parameter seams (behaves like invalid : so ignored) to ignore it.

The function .hashchange for JQ mobile with the exact purpose that I follow as comments.

I tried to installed it but the chrome navigator for windows seems unable to hold it or more probably JQ mobile tests the device application context.

I could not find a simple memo detailed list of events for each object type.

The search of keyword "hashchange" doesn't give any result on the JQ API site while JQ plugins gives 3 answers :

xHashchange

jQuery Hashchange

aciFragment – Store/read URL fragment variables

They are all two years old.

The third gives a description of what I am implementing on WordPress (Desk and mobile)

The second "jquery-hashchange-master" provides a "jquery-hashchange.js" which as the effect that there is no more error on .hashchange function but $(window).hashchange remains without any action

The first : "hail2u-jquery.xhashchange-v0.2.2-0-g4bc6db7" provides a "jquery.xhashchange.js" which functions for now normally (it is a hashchange function defined for JQ which is added to JQ current loaded version).

Then I had to, for any case, change some parts of code (the ID values of elements targeted) to be able to hold a quick (hierarchical selective) targeting way on elements linked to the hash so that I can run the function on the right element within a minimum of test.

I have not ended the test and basic implementation because I was away yesterday.

For now it remains two problems (the visible ones : may be more):

The future portability of the code (not have twice the definition of the function). It is the reason why I have tested the JQ Mobile installation to get the function (which must be activated on desktop version also)
The way for jquery.xhashchange to send back -bind - the event to the system while it can be a hole if not). I observed in first test that the actions generated by the event (scroll to the #fragment and run the css #fragment:target ... {... } which seem to be performed before the hashchange function. This can change the way to hold the vent (for example the data about the position of #fragment into the viewport)
Why the (window).on("hashchange ...") doesn't function, I am going to check the whole code deeper (it is all Wordpress with 100 plugins...) because for example if there are twice (or equivalent) $(window).hashchange(...) the second will never get the event.

I go back with news on tests

Best regards

Trebly

jakecigar

Re: :Target and action on a fragment element when targetted from URI #fragment

8 years ago

$(window).on("hashchange",…works all the time for me.

There is also the history api for even trickier tricks,

Make a tiny page, and see that it works well for you too!

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

:Target and action on a fragment element when targetted from URI #fragment

Replies(5)

Re: :Target and action on a fragment element when targetted from URI #fragment

Re: :Target and action on a fragment element when targetted from URI #fragment

Re: :Target and action on a fragment element when targetted from URI #fragment

Re: :Target and action on a fragment element when targetted from URI #fragment

xHashchange

jQuery Hashchange

aciFragment – Store/read URL fragment variables

Re: :Target and action on a fragment element when targetted from URI #fragment

Statistics

Tags

Actions

Related Posts