I want to add some animation to existing script I have right now. This is simple "go to div" script which goes to specific Div when someone change the option in dropdown list, but it functions "onchange" instead of link click. Now I would like to add animation, some smooth scroll when it goes to that Div because right now it just snaps to it and customer could be disoriented, thinking what happened.
This is my script inside HEAD
<script type="text/javascript">
function mylinkfunction(e) {
window.location.hash="#reservation_summary";
}
</script>
And this is the trigger mylinkfunction(); in dropdown list, among other "onchange" triggers.
<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">
I've found few solutions but everything was made for onclick and when someone click on a link, tried to implement some of these but it didn't work for "onChange" trigger.
I would be very thankful for some help.
Add jQuery to your project (if you haven't already!) and use jQuery's .animate() function along with scrollTop to achieve the desired effect.
So the select will look something like what you already have:
<select onchange="mylinkfunction();">
<option value="one">Uno</option>
<option value="two">Dos</option>
<option value="three">Tres</option>
</select>
...And mylinkfunction() will look like this:
function mylinkfunction(e) {
$('html, body').animate({
scrollTop: $("#reservation_summary").offset().top
}, 2000);
}
Related
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I have binded a Telerik dropdownlist with viewbag. It's working well. But listed items are wrapped.
Instead of coming in single line like 'United Arab Emirates' , It comes like
United
Arab
Emirates
How could I unwrap the line item
Thanks in advance
Is this in regard to Telerik ASP.net controls?
If so,
Have you tried setting the "NoWrap" property in the aspx of the combo box?
NoWrap="false"
I would check the width of the control, which would include the container for dropdown list values. You may have to change the CSS width... but it wouldn't be dynamic based on the dropdown values.
Here is a Telerik suggestion.
Are you actually using a dropdown list, or are you using a Telerik ComboBox? The combobox has a lot more options than a normal drop list, and in most cases it is very easy to convert from one control to the other. It's like a drop down list on steriods. Using the combo box, there is an awesome property called DropDownAutoWidth which you can set to enabled/disabled. Enabling will auto-size the width of the drop down based on the items that are in the drop down.
Try the code at this demo: Prevent Wrap of Kendo UI Drop down list item.
In the demo, you can change the text of any item in drop down and you will notice that the drop down width will automatically adjust so no wrapping of any item occurs. Put the JavaScript in this demo inside the document.ready event.
Markup
<select id="ddl1">
<option value="1">1</option>
<option value="2">option 2</option>
<option value="3">longer option 3</option>
<option value="4">even longer option 4 dssd s dssas </option>
</select>
JavaScript
$(document).ready(function() {
$("#ddl1").kendoDropDownList();
setWidth($("#ddl1"));
});
function setWidth(el)
{
var d = el;
var p = d.data("kendoDropDownList").popup.element;
var w = p.css("visibility","hidden").show().outerWidth();
p.hide().css("visibility","visible");
d.closest(".k-widget").width(w);
}
I've recently started trying out d3.js for visualization. I don't have much of a background in JS or web scripting, so sorry if this is an easy thing that I'm asking.
The exact example doesn't matter too much. I am making a graph, something like this
I want there to be a drop down menu on the page that lists different data sources. The user could then select the data source and the graph would update.
I created a drop down menu using the example here. However, I am unsure how to get the value as I need the line
d3.json("miserables.json", function(json) {
to update with the new name.
Your html file should look something like this...
<select id="json_sources" name="json_sources">
<option value ="source1.json" selected>Source 1</option>
<option value ="source2.json">Source 2</option>
<option value ="source3.json">Source 3</option>
</select>
Then you add an event listener for the change event on the select element (.on in d3.js):
var dropdown = d3.select("#json_sources")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.json(source, function(json) {
//continue doing stuff here.
})
}
dropdown.on("change", change)
change(); //trigger json on load
I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).
For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.
Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?
Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?
Thanks!
I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application's functionality.
Button 3
And the script would simply use the href to post to your page.
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
Update
Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.
If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()
Each will work fine. But the <a> you can style with an image while <input> and <button> you cannot (the browser decides on the look).
Simply bind the click event on the button. Assuming you have this HTML:
Button 1
Button 2
...
Button 3
Here's the Javascript. The trick is to call the AJAX here, and return false to prevent the Browser from changing page.
$('a').click(function(e) {
$.get($(this).attr('href'), function(result) {
alert('AJAX result = '+result);
});
return false;
});
You could create a custom attribute on each button.
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
In your javascript
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
By doing this you can add additional attributes to extend the data stored in each button and it also makes chaning the AJAX target link very easy since it's centralised, rather than spread around multiple anchor tags.
As an alternative to Marks answer, you could use a <form> element, and have each button a submit button; either a input or button. Set the name of the element to "btn" and the value of the element to the button number.
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
The jQuery would look something like:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
If you want the submission to be a POST request, this would most likely be better. For a GET request however, Marks will probably be easier.
I call a certain div from another page with jquery to be loaded into a div on my main page like this:
<script type="text/javascript">
$("#scotland").load("http://www.example.com/scotland .gallery");
</script>
<div id="scotland"></div>
The div I call is a piece of code which is automatically generated by a CMS made simple module, by the way.
Now it comes to my problem: The .gallery div I call, looks, a little simplified, like this:
<div class="gallery">
<span><img src="http://www.example.com/scotlandimage1.jpg"></span>
<span class="imgnavi"><a href="link_to_next_page_with_one_image">Next image</href></span>
</div>
I want the "next image"-link to load the next page into the .gallery div (it is always a page with one image on it). But what it does, is, it opens the new page http://www.example.com/scotland only.
I tried to use jquerys .live event to load the linked page (that would be "scotlandimage2" and the navigation, as you can see in the upper part - not only the image!), but I must have done something wrong. I tried different ways, but never got it to work. This was my last try:
$(".imgnavi a").click(function() {
var myUrl = $(this).attr("href");
$(".gallery").load(myUrl);
return false;
});
I have to admit that I am very new to jquery... But does someone know what I did wrong (do I even follow the right handlers?)?
Thanks very much in advance!
Martin
Your first attempt is good, but you're missing the required-for-ajax call to live instead of click:
$('.imgnavi a').live('click', function(ev) {
// Stop regular handling of "click" in most non-IE browsers
ev.preventDefault();
ev.stopPropagation();
// Load the new content into the div (same code you had)
$('.gallery').load($(this).attr('href'));
// Stop regular handling of "click" in IE (and some others)
return false;
}
EDIT in response to the question: "What will happen with the old $('gallery') content?"
With the above code, the old content will be replaced with the response to the .load() request. If you want to, say, prepend the image instead, you can just wrap the .load() call in a call to the built-in jQuery $.prepend( content ) method, like so:
$('gallery').prepend($.load($(this).attr('href')));
The same works for appending.