I need my JQuery slideshow to change div content on reload - javascript

Hello again my JS saviors! I have another dilema:: I have a div titled "homebanner" that contains text and a background image. My client decided that he wanted the #homebanner to change on reload with 4 images/slides.
So, I did this to change the background::
JS CODE
jQuery(function($){
$('#homebanner').css({backgroundColor: "#fff"});
var totalCount = 4;
var num = Math.ceil( Math.random() * totalCount );
function setBGImage() {
var bgimage = 'http://bwpcommunications.com/TESTING/images/homepage/'+num+'.jpg';
$('#homebanner').css(
{
backgroundImage:"url("+bgimage+")",
});
}
setBGImage();
});
And it works great! So I'm stoked about that. But I can't figure out a way to have specific headline text to correspond with each image. Is this possible? Also, here's a link to the test site http://www.bwpcommunications.com/TESTING/. As you can see, when you refresh the page the image changes but the text does not.
Any help would be awesome!
Thanks,
Shadna

put whatever headline text options you want into an array
var hText = ["blue jeans", "red jeans", "ripped jeans", "plaid"];
then right after setting the background image, you can use the num variable to pick the corresponding text from the array (or if you want it random you can just do the random number generation again). Then it's just a matter of setting the text on the page.
$('#htxt').html(hText[num]);
or in plain javascript:
document.getElementById('htxt').innerHTML = hText[num];
depending how the images are numbered, you might need to do num - 1 since the array is 0 indexed.

Related

Jquery - Dynamically Add Text Over Time - 'Hacker Box' - 'Console'

So I'll be as clear and simple as possible. I love seeing inside a computer.
On my site, I want to have a wide box at the bottom of the page.
Inside this box, I'd like things going on inside the site to appear as text.
I understand how to make a jQuery event such as a click or a hover, spit out some text. What I don't understand is how to make that text go into a box that has say, 10 lines, and once the 11th line of text is created, the first slides up into the void, to be deleted.
After some searching around, I found this, which is getting closer to the goal.
var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Whatever text"
];
var i = 0;
setInterval(function() {
$("#message-box").html(caption[i]);
i++;
if (i == caption.length){i=0;}
}, 3 * 1000);
Here's the issue with the code I've found. It's actually designed for a series of changing tip at the bottom of a screen. The text will override previous text written.
Although it might be obvious I'd like to note that this sample set of text should appear in this read-only console area over time. I tried messing around with a .delay(1000) to no avail.
I don't need to get complex and write in real events for the appearing text, instead I can just create faux events - just to get the ball rolling. I figure so long as I have the main idea coded with a "false" series of "hacker-esque" codes running down this kind of... "read-only console," I'll be able to tack on some code to a new event I create in the future (click, drag, reorder, etc.) and the faux-hacker box/console will actually have some real events in it.
I may just keep faux stuff in there just to give a certain feel to this particular artistic, 'symbolically back end' website. Thank you so much guys!
Here's something that might work as a basis for what you are trying to achieve. It creates a box and then displays random messages into it, scrolling them up (by deleting the first message) when the list reaches 10 messages. I haven't attempted to style it all, you could make it look a lot prettier (and use animations to remove items slowly). I've also put a limit on how many messages it displays in total (so the snippet doesn't run forever) using the counter on i, you could remove that in your application.
var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Some other message"
];
var i = 0;
var h = setInterval(function() {
// already 10 messages? if so, delete the earliest
if ($("#message-box p").length == 10)
$("#message-box p").first().remove();
$("#message-box").append('<p>' + i + ': ' + caption[Math.floor(Math.random()*5)] + '</p>');
i++;
if (i == 20) clearInterval(h);}
, 1000);
#message-box {
height: 400px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="message-box"></div>

TinyMCE how to dynamically get line breaks in a textarea

I need advice on how I can create dynamic line breaks ideally with an <li> inside TINY. I have tried using an each loop and also a for loop, and the values just do not appear in the text area. BUT, if I just add them to the text area with a val() they go in fine, BUT as just one long string.
The text area has an id of wo_materials. I'm successfully getting my text into Tiny like this:
$('#wo_materials').val(materials);
tinymce.init({
selector:'textarea'
});
And I get a nice row of text values:
The materials value is an array. If I look at it in the console it looks like this:
0: BP #15 Plain Felt 36"
1: Duraflo Weatherpro 50
2: 1 1/4 Coil Nails - box
Thanks !
If you're only modifying the value of the text area before tinymce is initialized then this might work for you:
$('#wo_materials).val(materials.join('<br/>'));
This works. The secret is adding the incrementing var "text" to the for loop and then wrapping the object / array in an <li>
var materials= JSON.parse(localStorage.getItem('materials'));
var text=" ";
materials.length;
function workorders(){
for (i = 0; i < materials.length; i++) {
text += "<li>"+materials[i]+"</li>";
}
$('#wo_materials').val("<li>"+text+"</li>");
}
workorders();

Javascript Random Clickthrough

I am creating an image which, when you click on it, sends you to one of four links. I have managed to code this, but the problem I am having is that it is completely random (only part of the point). What I would like to be able to do is to randomise the first click through, and then if the user goes back to the image, only leave them with the remaining three destinations, and then obviously two and one at the end. This is to stop them theoretically ending up at the same link every single time and not being able to access the other three.
Does anybody know how I might be able to do this? The code I have currently is:
<img src="IMAGE" onclick="randomLink();">
<script type="text/javascript">
var randomLink = function () {
var links = ["LINK 1","LINK 2","LINK 3","LINK 4",];
var max = (links.length)
var randomNumber = Math.floor(Math.random()*max);
var link = links[randomNumber];
window.location = "http://" + link;
}
</script>
You can simply remove the selected entry from the links array (i.e. using Array.splice). Next time the user clicks the link, you would generate a random number between 0 and 2 only and so on.

JavaScript array show10 images then next 10

I need some help with some logic. I have a JSon feed with 600 images. I want to show the first 10 pictures. When the user gets to the tenth picture, if there are more pictures in the array show the next 10 images. I already tweaked json to give me just 10 images but I am not sure how to get the next 10 items in the array. I knowthis hassomething to do with a counter but its all not connecting for me. Any suggestions, pseudeo code,links or code is apprecaited.
Thank you
There are two approaches I can think of to load the content.
Create DOM with all the photos and show only first 10. Hide the rest. Show next 10 once you hit the visible 10th item.
Keep the reference to JSON object Render only first 10. On hitting the 10th hide current 10 n show next 10.
You haven't mentioned if you want to scroll horizontally or vertically.
Create 2 divs with parent having width fixed and child div containing a target images with huge width
You can see an example at http://jsfiddle.net/ch4nd4n/LS7VV/4/ this may not be exactly what you want but you can get the idea.
HTML structure
<div style="width:500px;overflow:hidden;height:255px;position:relative">
<div id="images" style="width:40000px;position:absolute;"></div>
</div>​
JavaScript part that you need to fire onload or post body load.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60474555#N00&lang=en-us&jsoncallback=?", {
format: "json"
}, function(data) {
var str = "";
$.each(data.items, function(i, item) {
str += ("<img src='" + item.media.m + "'/>");
});
$("#images").append(str);
$("#images").find("img").click(function() {
// Add check to animate only if clicked image is not the center of parent div
$('#images').animate({
left: '-=200'
}, 500);
});
});​
It is just pseudeo in java script. Just analyse the loop.
Just start collecting images from Json feed into array container. As you get 10 images, display them with function and clean the container. Keep on doing till all images are over.
Show the last few images which are less than ten by calling function again.
I couldn't give exact code becuase, json feed structure is now known.
var jsonFeed={...};
var counter=0;
var setOfTenImages=[];
for(i=0;i<jsonFeed.length;i++){
if(counter==10){
showTenImages(setOfTenImages); // call function to display Ten Images
setOfTenImages=[]; // clean all container of Ten images which are displayed.
}
setOfTenImages[counter++]=jsonFeed[i].image;
}
showTenImages(setOfTenImages); // Last remaining few images which are less than ten.

Javascript - changing image won't work unless i alert()

I'm building a JavaScript based poker game that get some updates from a server via Ajax.
when player are in "show down" each one of them supposed to show what card he holds,
I'm changing the pictures of each showdown hand (from blank card to an actual card i.e King of spades img)
I have the weirdest problem: when i change the images (as shown in the code below),
the images wont change from blanks to actual cards, they remain "blank.png".
whats weird is if i remove the "//" from line9 (and get an alert message) the cards are shown with their actual image i.e "Ace of spades.png"..
what's with that?!
function executeShowDown(){
(...)
var playerCard1Id = "#player"+(playerNum)+"card1"; //the specific image id for hole card #1
var playerCard2Id = "#player"+(playerNum)+"card2"; //the specific image id for hole card #2
var card1 = "res/images/cards/"+handArr[0]+".png";
var card2 = "res/images/cards/"+handArr[1]+".png";
$(playerCard1Id).attr("src", card1);
$(playerCard2Id).attr("src", card2);
$(playerCard1Id).css('visibility','visible');
$(playerCard2Id).css('visibility','visible');
//alert("endShowDown"); ##### LINE 9 #####
return;
}
This might be happening too fast. Maybe add something to make it wait for 1 second or so, or you could use a callback function, I see you use return there so maybe the other function where you call this from does not wait for it to end.
Good luck!

Categories