There was a code I saw where it showed like 3 products and the product specs in table form, one right next to the other, and when you hover over a product, it kinda popped. It might have been jQuery, as opposed to HTML5 or CSS3 but I'm wondering if anyone knows what I'm talking about, and where I can find this code?
You can add a desired css style for elemet with id, say "popped".
and the script:
$(".product").hover(
function () { $(this).attr('id','popped');}
function () { $(this).attr('id','');}
);
and "product" is a class of your product tabs.
Related
I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?
Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.
This is now natively supported by the Kendo grid. Here's an example.
You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference
However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:
function onDataBound(arg) {
var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
$("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'> <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th> <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
}
}
For more understanding and a working example please see below Sample:
MultiRow-Column Header Sample
Please let me know if you if you have any queries.
How can I make a switchable table with buttons to lead to different view of another table? Something like this:
As you can see, once you click on the buttons it takes you to another table list.
Here is a base: http://jsbin.com/agavid/136/edit
Need something similar to this.
You can create several different tables and use a simple JS/jQuery script to show and hide the tables based on which button is pressed.
Essentially you would show all tables at start (for progressive enhancement), then hide all of them except the first one. Then when a button is clicked, hide all the tables and show only the one associated with that button.
Here's a demo of what I'm talking about. http://jsfiddle.net/7Ywbn/2/
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
Hope I understood your question correctly.
here is a suggestion
wrap each table in a <div id="table1"> <div id="table2"> etc.. and hide them all by default. here is some help on that: hiding div using js
and then only show the <div> for the table associated with the button the user has clicked on. you can do this using javascript, jquery as a couple examples.
you may need to start looking into learning some basic javascript/jquery if you don't already know any, you are going to need it.
good luck.
You could create multiple divisions within the same file and hide all the divisions except the primary you want to display during the initial page load. then use "onClick='showNextDiv();" inside the buttons themselves.
A sample of the javascript would be:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
document.getElementById('DivName').style.display = "block";
document.getElementById('FirstDiv').style.display = "none";
}
</script>
All this is saying that when someone clicks on a button this script runs and displays the 'DivName' div. That's what "block" means. It also turns off the division "FirstDiv" by using the "none".
You can add as many "block" and/or "none" statements to the script. If you have 6 divisions you would want to display one and turn off 5.
I hope this is helpful. I'm not an expert at this but it works fine for me.
i think the title is pretty self explanatory.
I have many divs generated from php code that take products from database.
the problem is when i drag them between two containers(also divs) i cant return all of them back to the first container because the products div id is same and it takes it as repeat from container 1 --> 2 and not backwards from contaner 2 --> 1.(2 containers have and all product divs have same id).
i can solve this by adding +1 to the divs id of the products(so they have different id) but that way i cant use the id from the css. Any solution?
here is the js code
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
if (ev.target.id == "container"){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}}
</script>
thanks in advance
ID must be unique for the HTML to be valid. When you duplicate IDs, strange things happen. Even if you manage to get it working in one browser, others may handle things differently. You could try using classes instead.
You can't have two divs with the same id. Try using classes.
Your drop() function should be something like this:
function drop(ev){
if ( ev.hasClass('container') ) {
// do some stuff
}
}
You can add classes dynamically with jQuery .addclass() method.
i have solved this by using incremented id for the div generated by php. how ever tha was not one of the solutions i wanted.
thanks for trying to help
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I would like to make a simple drop down menu when you click your choice from the list, it acts as a link.
Sorry for title being so ambiguous, I just do not have any idea what to call this.
The easiest way is to create a select list with attributes representing the links, then use JavaScript to jump to a link when it's clicked.
But a more accessible way would be to create a list of links, then use JavaScript to construct a select list from them. This way, the links would still work if JavaScript was turned off.
With jQuery, something like:
Link 1
Link 2
And your script is:
var $sel = $("<select/>")
.appendTo("body")
.change(function() {
document.location.href = $sel.val();
})
$("a").each(function() {
$("<option/>")
.appendTo($sel)
.val(this.href)
.html(this.innerHTML)
});
Do you mean that when you select an option from a drop-down, the browser goes to a different URL?
If so, here's a good page that describes how to accomplish that: http://www.davesite.com/webstation/js/theory1jump.shtml