- Screen name: tulio69tm
tulio69tm's Profile
7 Posts
3 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- i created a related posts system for my blog:One page have all posts with it's thumbnail and it's title and each div containing those information have a unique id which is the same id of the post.Then i get all id's from my blog feed to a string and creat a array using .split()Then i get a random id from the array and use .load() to download each related post.it works perfectly with Chrome, even with IE, but it's not with firefox.please, see it in action, it have a nice 3D effect: http://www.leitecompera.com/2012/01/ele-existe.html#relacionadosHTML:
- <div id='related'>
- <ul>
- <li id='rel1'><div/></li>
- <li id='rel2'><div/></li>
- <li id='rel3'><div/></li>
- <li id='rel4'><div/></li>
- <li id='rel5'><div/></li>
- </ul>
JAVASCRIPT:- $(function(){
- arr = " postNumberID postNumberID postNumberID ...".split(" ");
- var post1 = arr[Math.floor(Math.random() * arr.length)];
- var post2 = arr[Math.floor(Math.random() * arr.length)];
- var post3 = arr[Math.floor(Math.random() * arr.length)];
- var post4 = arr[Math.floor(Math.random() * arr.length)];
- var post5 = arr[Math.floor(Math.random() * arr.length)];
- $("#rel1>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post1);
- $("#rel2>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post2);
- $("#rel3>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post3);
- $("#rel4>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post4);
- $("#rel5>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post5);
- //this will make sure something has been loaded
- check = setInterval(function () {
- $("#relacionados li").each(function () {
- $this = $(this);
- var c = $this.find(".thumbrel").size();
- if (c != 1) {
- var b = arr[Math.floor(Math.random() * arr.length)];
- $this.find("div:first").load("http://www.leitecompera.com/p/saasdfasdf.html #" + b)
- }
- });
- var a = $("#related").find(".thumbrel").size();
- if (a == 5) {
- window.clearInterval(check)
- }
- }, 2000);
- //3D effect
- $("#related li>div").hover(function () {
- $(this).stop().animate({
- width: 130,
- height: 190
- })
- }, function () {
- $(this).stop().animate({
- width: 114,
- height: 172
- })
- });
- }):
No 3D effect will work and no information will be loaded with firefoxi know i could just use a widget but they will always use redirect and are not personalizable.This way i can create a custom thumbnail for each post which will be used by facebook and other social media and there's less third party requests- I am new to jQuery, javascript but until now i created a Chrome extension the hides youtube videos with more unlikes than likes and it actually works! charming and smooth!But i want to go further, i want allow users to choose how much unlikes (%) a video must have to be hidden, and i want to allow them to filter videos by words.After many tries, now a can type some words separated by commas in a text input that is in the options page and store them locally.Then my Content Script get those words as a string and get video title and tags as another string.But i get lost when playing with arrays.I need to check if any of the words in the video title matches any array elements.What's the best way to do this?
- 07-Feb-2012 01:20 PM
- Forum: Using jQuery
Jus wondering...Well, sure cookies are not associated with the specified element, but both store a value.If .data() can be stored for long as a cookie can be, then would be easier than work with cookies..- 29-Jan-2012 04:14 PM
- Forum: Using jQuery
After 2 days working hard i created this with the basic Jquery knowledge i have:I am so proud of myself that i wanna kiss me!Basicly we have this:- <div id='navegador'>
- <input type="button" id="pp"/>
- <input type="button" id="pa"/>
- <div id='filtrar'>
- <div id='carregar'></div>
- </div>
- </div>
- <center>
- <div id='tela'>
- <img id='temp' height='410' src='http://dl.dropbox.com/u/30523456/Blog/tela.gif' width='544'/>
- </div>
- </center>
- $(function(){
- $('#carregar').load('http://www.leitecompera.com/search/label/troll face #post', function(){ //load posts
- $('#carregar .post_footer,.post_info,.post_author,div[style="position:relative"],.post-header-line-1').remove(); //remove trash
- $('#carregar #post').each(function(){ //get what is important
- $('h2.tit>a', this).appendTo($(this).parents('#filtrar'));
- $('.entry>center>img', this).appendTo($(this).parents('#filtrar'));
- });
- $('#filtrar a').each(function(){ //arrange and make it more editable
- $(this).html('<span>'+$(this).text()+'</span>')
- $(this).next('img').appendTo(this)
- $('span',this).css('marginTop',$('img',this).height()-$('span',this).height()-6);
- });
- $('#carregar').remove(); //remove more trash
- $('#filtrar a').bind('click', function(e){ //loads post-image on click
- e.preventDefault();
- $('#temp').remove(); //remover holder
- var source = $('img', this).attr('src'); //get post-image source
- $('#tela').append('<div id="temp"><img src="' + source + '"/></div>') //creat post-image within holder
- });
- });
- });
It load a bough of ugly html which contains all posts from a label to "#carregar" and them get's what is important using .appendTo("#filtrado") and make it more editable with some "<span>" and delete "#carregado" leaving what i want and them a code to fire when the user clicks a post.
This code will get the post-image source and creat a holder and a image in "#tela" displaying the whole image. If other post is clicked the holder is deleted leaving "#tela" empty so the process may restart.
As it is started project only some posts are loaded so far, but in the future it can get tricky and slow to load. Therefore i want to load 8 posts on pageload and plus 4 every time the user clicks '#pp' and i have no idea what would be the right way to do this.
The code-line which is currently loading the posts is in red.
Please help.
- So my blog's posts is basicly like this:
- <div id='blogposts'>
- <div class='post' id='post'>
- <div class='post' id='post'>
- ...
- <div class='post' id='post'>
- <div class='post_top'>
- <div class='entry'>
- <div class='post_footer'>
- <input type="button" class='showPlus'/>
- <div class="pluscontent"><input type="button" class='hidePlus'</div>
- </div>
- </div>
- </div>
"pluscontent" is initially hide, when "showPlus" is clicked it and "pluscontent" must toogle and when "hidePlus" is clicked "showPlus" and "pluscontent" must toogle, but this must happen ONLY with the post involvedwhat i tried:- $('.showPlus ').click(function(){
- $('. showPlus,.pluscontent').toggle("slow");
- });
- $('.hidePlus').click(function(){
- $('. showPlus,.pluscontent').toggle("slow");
- });
what should i do?I have been reading this a lot like "the elements will be filtered by testing whether they match it. "
Then i was wondering: does that means that if use $(".class") it will test ALL elements to see which matches the class and if i use $("h2.class") it will test only h2 elements to see witch matchs the class and there fore would be faster and lighter processing...
or i am talking bullshit?
Hi, a made some 2 buttons on my blog so users can go the next or back trought posts. I think would be interesting to show the posts titles. It's a blogspot blog so i'm trying to use a variable to catch the URL's so i can use them with .load and target the post's title:
- $(function(){
- var getlink = $("a.blog-pager-newer-link").attr("href");
- var gettitle = $('.entry').load(getlink+ "#this-post-title"); //this part won't work!
- $("<div id='next-title'>"+gettitle+"</div>").appendTo("a.blog-pager-newer-link");
- });
- «Prev
- Next »
Moderate user : tulio69tm
© 2013 jQuery Foundation
Sponsored by and others.

