Ive exhausted my amateur scripting skills and seeking help.
Here is my sites main index and the current working script with one set of adds randomly displaying on my home page.
http://blessone.netau.net/
Ive managed after alot of tries with different codes ive come across to come up with this.
divs = ['d1','d2','d3','d4'];
function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementsByClassName('adbox');
}
function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementsByClassName(randomDiv).style.display =
'block';
setTimeout(showDiv,500); //set a delay before showing the next div
}`
Im trying to display a div randomly on my home page from a set of divs in "adverts/pop_left_ad.php"` Popular Products.
Works great!
But one problem. When i try to use.....
<?php include("adverts/pop_left_ad.php"); ?>
...twice on one page it doesn't give me two different random divs on my page, no matter where i place them. I am using different files for each set of divs that are than called upon randomly by their calling div.
I should point out im NOT sure how to edit the JS for my second inclusion. Do i only add a series of div ID's in there??? What elements do i change in the JS?
I have now learnt that the issue is my id setup and have changed that to a class setup.
So i need help making the additional changed to my JS to incorporate the Classes and so on.
Any help is greatly appreciated.
Many Thanks.
the issue appears to be that you are using id attributes for your divs. This is fine where there is only one copy of d1, d2, d3, d4 in the code, but if it's included multiple times, getElementById will have trouble differentiating between the different divs with the same id.
what I would do change the id attirbutes for each of d1 through d4 to class attributes (and do the same for the contents of each of d1-d4, e.g. make id="adTitle" into class="adTitle"), then wrap the set of ads in a div with a class attribute named something like "adbox"
from there, you modify your code to get all divs that have the adbox class, then loop through the interior divs with classname d1-d4 like you do currently. with jQuery you can do something like $('.adbox').each() which makes the looping dead simple, but you can also use document.getElementsByClassName('adbox') if you want to stick with pure JS
Related
Basically, I need to create div and/or li items with unique ID's and values from form input and button click.
For example, if I want to choose the duck-div, I'll search for it in the input search bar, choose it and click "add". The duck-div would have a duck in the background and other div's other animals. Well, animals aren't my goal, but you get the point.
This far I've accomplished creating < div > and < li > dynamically via either jQuery append and JavaScript create, but those are all with same ID's and values. They're clones. I need to create unique divs, but I don't even know where to go from here.
Thank you so much for any help
P.S. If you don't know how to create it, but you know what programming language it is related to - please let me know! I'm pretty good at figuring stuff out, but I have currently no idea even what language I need to search the solution from. Thank you.
I'd suggest something like this:
function makeDuck() {
var duckCount = $('.duck').length;
var duckId = 'duck'+duckCount;
$('<div class="duck">').attr('id',duckId).appendTo('body');
}
When you create a duck div you give it a class of "duck". That lets you count the number of existing "duck" divs before creating a new one and use that count to generate a unique id.
And here's a more generic function for creating any species of animal.
function makeAnimal(species) {
var id = species + $('.'+species).length;
$('<div>').attr('class',species).attr('id',id).appendTo('body');
}
Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
- Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
- Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I'm guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.
You might want to look at using a calendar feature, I'm sure there's a ton of Javascript calendars out there. I also have had a lot of success lately using DataTables. You could use DataTables + jEditable to create a click to edit table representation, that when clicked gives you a select box, but otherwise shows only text.
Perhaps you could have a single hidden select box on the page and display it on a cell when clicked, and handle the result of the click by writing a data-attribute to the cell, and perhaps doing a simultaneous XHR?
You could also just have a bunch of hidden form elements, but that would be gross.
Implementation-wise, you could do it with a single event handler attached to the table, with each cell having data-attributes representing name and week.
Anyway, this should be performant, even though it would require an extra 20 or so lines of js.
Maybe something like this could work for you:
var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
td[i].id='cellID_'+i;
td[i].onclick=function()
{
//make menu appear on this element id
}
}
I have a list of people on the left hand side of a page, this list is populated by PHP.
Each person is in their own div (this can be changed but I thought div's may be easier to work with). I want to be able to drag any one of these people onto a textbox, thus entering their name into that textbox.
Also to make it more awkward, I don't really want to be using jQuery or prototype. Or any of the others really.
Edit:
Sorry let me rephrase the question...
How would I check to see if something has been dragged on top of a textbox? And how would I get the ID of that element?
What I don't know is how to check if something has been dragged on top of the textbox (input box, not text area, but that's no big issue.)
I know there would never be a magical param like onDragOnto="" but hopefully that will show you what I mean
Without more details, I can't really provide a better answer.
How about clicking within the DIV element resulting in a Javascript event to be fired which causes the element's text to be selected? Then, you can drag this text into a multiline textarea.
Now, with the information from the edit:
You'd register a onmousedown event with each DIV that you have.
On the names:
<div onmousedown="onMouseDown(event);" onmouseup="onMouseUp(event);">Jane</div>
On the textarea/textbox:
<textarea onmouseover="return onMouseOver(event);"></textarea>
And a script:
<script>
function onMouseOver(evt) {
target = document.lastClicked;
if (target != null) {
window.alert(target.id);
}
}
function onMouseDown(evt) {
document.lastClicked = window.event.target;
}
function onMouseUp(evt) {
document.lastClicked = null;
}
</script>
This is a very crude way to do things, but I hope this gives you the principles that you're looking for. If you want to force the elements to move rather than just using text drag-and-drop, then things get more hairy. To handle that, you'll need to use CSS and modify the coordinates.
I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.
Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.
What I want to do, if it is possible, is this:
I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.
#div1 will fade out
#div2 will fade in
Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.
I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.
Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.
Is that easy enough to understand and gain an answer?
EDIT # 01:46 GMT, 30/04/2010
Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.
I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as follows:
function resetTabs() {
$("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
}
function showTab(tabname) {
resetTabs();
$('#'+tabname).fadeIn(3000);
$("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
}
The principle is this:
My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example:
Link
The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".
I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.
I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?
While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]
Basically it searches the container div for an element that is visible using the :visible selector
The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.
Then it selects the id to show.
Calls out both animations at the same time with:
vis.fadeOut(speed);
next.fadeIn(speed);
If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.
This works fine on all new-ish browsers but chokes a bit on IE7 or less.
Alternatively you can get a collection of hidden elements with :hidden
If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.
Maybe this is what you want?
$('#div1').fadeOut('3000', function() {
$('#div2').fadeIn();
});
When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
Here is a walkthough
$("#div1").fadeOut(1000, function(){
This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.
$("#div2").fadeIn(1000);
This simply makes you new idea fade in after the other one has completely finished fading out.
});
Simply closes up everything that we opened.
I think what you are worried about is that
$("div").fadeOut(1000);
Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"
Also, you set it with the id attribute:
<div id = "div1"></div>
I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....
currently trying to put it as a module on my joomla site
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});
This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.
Further to my question yesterday (here), I am working on a webpage that has a section that shows 'live' order details.
The top half of my webpage has Spry Tabbed Panels. One of the panels contains an include call to a separate php page that I have created (getOpenOrders.php). This contains an SQL query to obtain all open orders and then puts the details into a table.
As a result, the table of open orders is shown in the Spry panel. What steps do I now need to take to have this refresh every 15 seconds?
Do you really want to call the database every 15 seconds for each user? isn't that an overload?
I'm not saying that your database will be overloaded, but, thats how you shouldn't do things!
Edited
you should show an image, or the link to that page in order to gt an appropriate answer, because it all depends in what are you doing in the table.
because I don't know, I will give you an answer on what probably is happening.
Because you said that you're new to the ajax world, let's make things simple, and not to complicate on the you should return a JSON object and use it to re populate your table. :)
So we will start with 2 buttons (Previous and Next) so the user can move the data that is showing (you probably don't want to give him/her 100 lines to see right?)
let's say that you have 2 pages, a showData.php and getTable.php, in the showData.php you will need to load jQuery (wonderful for this) and add a little code, but where the table is to be placed, just add a div tag with an id="myTable" because we will get the data from the getTable.php file.
getTable.php file has to output only the table html code with all the data in, without no html, body, etc... the idea is to add inside the div called myTable all the code generated by getTable.php
Let's imagine that getTable.php gets a page variable in the queryString, that will tell what page you should show (to use LIMIT in your MySQL or PostgreSQL database)
You can use jQuery plugin called datatables witch is one of my choices, check his example and how small code you need to write! just using jQuery and Datatables plugin.
The first description follows the jQuery.Load() to load the getTable.php and add as a child of the div and wold do this for the previous and next buttons, passing a querystring with the page that the user requested. It's to simple and you can see the website for that, if you prefer to use the DataTables plugin, then just follow their examples :)
if you, after all this need help, drop me a line.
<META HTTP-EQUIV=Refresh CONTENT="15; URL=<?php print $PHP_SELF ?>">
This should be in between the head tags.
-or-
header('Refresh: 15');
This should be before the head tag and directly after the html tag.
As said by balexandre, a different method should be used. One that does not require a database hit every 15 seconds for every single user that is connected to the site. But, there is your answer anyways.
Although, balexandre makes a very good point, if you do decide that you need a refresh, you could simply do something like this in your JavaScript:
window.onload = function( )
{
setTimeout( 'window.location.refresh( )', 1500 );
}
(I've not tested the above code, so syntax may need to be tweaked a little, but you get the idea)