I am pretty new to jQuery and here is my problem with this website.
As you see, There is a some small pictures in the right. I wrote a very simple script with HOVER in order to change the opacity of the element when mouse over. But this doesn't work until I do a small change in that script in Firebug (e.g. just by press space in any line of script it becomes active). and then it works! I completely confused by this.
If anyone can help me through, I can correct the same problem with another script that change the position of those small pictures as you move over.
I am searching for any solution that can do the same thing as I want.
Thank you
and goodbye presently.
You need to wrap your calls to .hover() in $(document).ready() calls like you have in some of your other script nodes because the images are not loaded in the page yet when those calls are executed. For example, this:
$('.s1').hover(
function () {
$(this).stop().css('z-index','9998').animate({left:-40});
},
function () {
$(this).stop().css('z-index','').animate({left:-80});
}
);
should be this:
$(document).ready(function(){
$('.s1').hover(
function () {
$(this).stop().css('z-index','9998').animate({left:-40});
},
function () {
$(this).stop().css('z-index','').animate({left:-80});
}
);
})
Hope that helps.
Related
When I navigate to a page using this event:
this.events.subscribe('liveTrackingEvent', (time, unit) => {
console.log("event triggered");
this.searchForm.controls['unitID'].setValue(this.unitSelected.unit.name);
this.GetLiveData();
});
everything gets called, also the function GetLiveData(). (I didn't post this function's code because it's irelevant)
However when I look at the page, not 1 element is updating. So this line:
this.searchForm.controls['unitID'].setValue(this.unitSelected.unit.name);
doesn't update the searchform control, however when I call this line of code from the page itself without the event getting triggered on another page, it works smoothly and updates the searchform control.
(It's like I'm on a separate thread for some reason), I'm putting this between brackets because it's just a thought.
So my question is: How do I force this page to update itself also when the event is triggered?
Thanks in advance and if you guys need more code just ask, but this is the most relevant code because everything is working just not when it gets called inside the event.
By using page life cycle events instead of custom events from the ionic framework I managed to make this work and even have a cleaner code.
example:
1st page:
GoToLiveTracking(unitID){
this.navCtrl.push(MapPage, {redirected: true, unitID: unitID});
}
2nd page:
ionViewDidEnter(){
if(this.navParams.get('redirected')){
let unit_id = this.navParams.get('unitID');
this.unitSelected = this.completeService.GetUnitByID(unit_id);
this.searchForm.controls['unitID'].setValue(this.unitSelected.unit.name);
this.GetLiveData();
}
}
I could think of only 1 reason for this behavior. You are updating your form outside of Angular Zone. That’s why the changes are not getting detected.
To fix the issue, wrapped the call of last 2 lines of event into “this.ngZone.run(() => { ... })”.
e.g
this.events.subscribe('liveTrackingEvent', (time, unit) => {
console.log("event triggered");
this.ngZone.run(()=>{
this.searchForm.controls['unitID'].setValue(this.unitSelected.unit.name);
this.GetLiveData();
});
});
I've made a vertical menu for my webpage. I want that when i click on any item in the menu, the content open without loading other page. The previous div hides and other div comes on clicking on the menu. Can anyone help me here?
http://demo.tinywall.info/html5-history-api/menu2.php
I need something like this, but with simple HTML and CSS. I also don't need to change URL, the url will be same. Only the hidden content shows up.
This is the website where i want to put this thing -> www.techstore.tk
You can do this:
#btnLeft:active {
...
}
Then insert anything that you want to change in that.
Or if you want to have jquery in, you can do the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".category").click(function(){
$(".filter").toggle("swing");
});
});
</script>
<div class="category">Select Me</div>
<div class="filter">My hide able div</div>
Speed
milliseconds - You can do any number to define how fast it it.
"slow"
"fast"
Easing
"swing" - moves slower at the beginning/end, but faster in the middle
"linear" - moves in a constant speed
Or, you can try a slide effect like this:
$(document).ready(function(){
$(".categorie").click(function(){
$("#.filter").slideToggle("slow"); // You can add any transition in place of "slow".
});
});
Callback functions
A callback function is executed after the current effect is 100% finished. But you can call another function before the effect starts. Here are both examples:
Callback - Executes after the effect is finished:
$(".category").click(function(){
$(".filter").hide("slow", function(){
alert("The effect just finished");
});
});
Executes before the effect starts. Note: this is not called a callback:
$(".category").click(function(){
$(".filter").hide(1000);
alert("The effect will start after this message goes away");
});
I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.
I made a one-page website which only has text on it and buttons which only purpose is to change the text in the container. And now when I made everything I forgot what if someone wants to link to a specific "page"/text to my site. What would be the best way to do this? So when someone clicks the button, address changes for each paragraph and if someone points to that address specific paragraph would appear/specific button function would do its job.
This is a jquery code for buttons so you can understand better :
$(document).ready(function () {
$('[id*=txt]').hide();
$('[id*=home]').show();
$('#btnhome').css({'background-color':'#555', 'opacity':"0.5"});
$('.button').click(function (){
$('[id*=txt]').hide();
$('.button').css({'background':'transparent', 'opacity':'1'});
$(this).css({'background-color':'#555', 'opacity':'0.5'});
});
$('#btnhome').click(function () {
$('[id*=home]').show();
});
$('#btnabout').click(function () {
$('[id*=about]').show();
});
$('#btncontact').click(function () {
$('[id*=contact]').show();
});
You would have to add a parameter to the URL. Like http://mysite.com?page=1
Then you would have to parse out the parameter. Here's a site that will help you with that.
Finally, you would provide for the page parameter in the document.ready function. You could use a switch statement for that.
bangin' my head against this and it's starting to hurt.
I'm having trouble with adding an event to an element.
I'm able to add the event, and then call it immediately with element.fireEvent('click'), but once the element is attached to the DOM, it does not react to the click.
example code:
var el = new Element('strong').setStyle('cursor','pointer');
el.addEvent('click',function () { alert('hi!'); });
el.replaces(old_element); // you can assume old_element exists
el.fireEvent('click'); // alert fires
however, once I attach this to the DOM, the element is not reactive to the click. styles stick (cursor is pointer when I mouseover), but no event fires. tried mouseover as well, to no avail.
any clues here? am I missing something basic? I am doing this all over the place, but in this one instance it doesn't work.
EDIT----------------
ok here's some more code. unfortunately I can't expose the real code, as it's for a project that is still under tight wraps.
basically, the nodes all get picked up as "replaceable", then the json found in the rel="" attribute sets the stage for what it should be replaced by. In this particular instance, the replaced element is a user name that should pop up some info when clicked.
again, if I fire the event directly after attaching it, all is good, but the element does not react to the click once it's attached.
HTML-----------
<p>Example: <span class='_mootpl_' rel="{'text':'foo','tag':'strong','event':'click','action':'MyAction','params':{'var1': 'val1','var2': 'val2'}}"></span></p>
JAVASCRIPT-----
assumptions:
1. below two functions are part of a larger class
2. ROOTELEMENT is set at initialize()
3. MyAction is defined before any parsing takes place (and is properly handled on the .fireEvent() test)
parseTemplate: function() {
this.ROOTELEMENT.getElements('span._mootpl_').each(function(el) {
var _c = JSON.decode(el.get('rel'));
var new_el = this.get_replace_element(_c); // sets up the base element
if (_c.hasOwnProperty('event')) {
new_el = this.attach_event(new_el, _c);
}
});
},
attach_event: function(el, _c) {
el.store(_c.event+'-action',_c.action);
el.store('params',_c.params);
el.addEvent(_c.event, function() {
eval(this.retrieve('click-action') + '(this);');
}).setStyle('cursor','pointer');
return el;
},
Works just fine. Test case: http://jsfiddle.net/2GX66/
debugging this is not easy when you lack content / DOM.
first - do you use event delegation or have event handlers on a parent / the parent element that do event.stop()?
if so, replace with event.preventDefault()
second thing to do. do not replace an element but put it somewhere else in the DOM - like document.body's first node and see if it works there.
if it does work elsewhere, see #1
though I realsie you said 'example code', you should write this as:
new Element('strong', {
styles: {
cursor: "pointer"
},
events: {
click: function(event) {
console.log("hi");
}
}
}).replaces(old_element);
no point in doing 3 separate statements and saving a reference if you are not going to reuse it. you really ought to show the ACTUAL code if you need advice, though. in this snippet you don't even set content text so the element won't show if it's inline. could it be a styling issue, what is the display on the element, inline? inline-block?
can you assign it a class that changes it on a :hover pseudo and see it do it? mind you, you say the cursor sticks which means you can mouseover it - hence css works. this also eliminates the possibility of having any element shims above it / transparent els that can prevent the event from bubbling.
finally. assign it an id in the making. assign the event to a parent element via:
parentEl.addEvent("click:relay(strong#idhere)", fn);
and see if it works that way (you need Element.delegate from mootools-more)
good luck, gotta love the weird problems - makes our job worth doing. it wouldn't be the worst thing to post a url or JSFIDDLE too...