Search jQuery

jQuery Forum

Screen name:
Ladan
About Me:
Self taught web designer. I enjoy web design and music. I love my bass and electric guitars from Ibanez and Fender. I love animals, and being friends with others.
Email ID: ladans37@gmail.com

Ladan's Profile

7 Posts

82 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

scroll page down when opening blog archive
[19Replies]
- 07-Mar-2020 05:26 PM
- Forum: Getting Started
I'll try my best to explain what I want to do with this. All I want is when opening my blog archive, I want the page to scroll down when I click it open. How to do this? I tried to find an example code, but couldn't.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

search button interference
[42Replies]
- 02-Mar-2020 05:52 PM
- Forum: Getting Started
Hey, I can't seem to unbind my search button with the function I added
1. <script>
2. $(document).ready(function() {
3. $("searchButton").click(function() {
4. $(this).slideToggle();
5. });
7. $("searchButton").click(function() {
8. $("searchButton").unbind();
9. });
10. });
11. </script>
It is interfering with the function to my blog archive buttons
1. <script>
2. $('button').each(function() {
4. /* "each" in jQuery lets us apply what's inside here to each button individually without having to give them each their own names. Imagine this code going down the line and repeating everything below for each of the buttons. */
6. var $thisButton = $(this);
8. /* To refer to the individual button inside of this section we can use $(this), but to try and make the rest of this more clear, I'm going to rename $(this) to $thisButton */
10. $thisButton.click(function() {
12. var $thisButtonsDropdown = $thisButton.siblings();
14. /* Sibling here means "on the same level as the button." We need to do this to find the section of months or links that matches this button we clicked, so that we slide up/down the right one--the one we want is the one that is next to it, its sibling. */
16. /* This part should be a little familiar! */
17. if ($thisButtonsDropdown.is(':visible')) {
18. $thisButtonsDropdown.slideUp();
19. $thisButton.removeClass('flip');
20. } else {
21. $thisButtonsDropdown.slideDown();
22. $thisButton.addClass('flip');
23. }
24. });
25. });
26. </script>
As Firefox's Inspect Element shows. What should I do?
"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

problem with archive's post count positioning
[30Replies]
- 27-Feb-2020 05:06 PM
- Forum: Getting Started
Hi. I'm having a problem that has me really stumped. When I click my blog archive open, say on 2020, the post count number next to that (8), will move down. I can show you here in the before/after pics

This one is an old pic before the number has been changed. And this is the after pic

And here's the related code :
1. #postcount {
2. font-family:Overpass, Georgia, Arial, Verdana;
3. font-size:17px;
4. color:blue;
5. }
1. <li id="postcount"> 
2. <button type="button" class="special">2020</button>
3. <ul class="year-inner" id="yr20">
4. <li>
5. <button type="button" class="special2" id="monthly">February</button>
6. <ul class="month-inner" id='Feb20'>
7. <li>
8. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190948067972/rejoice">Rejoice!</a>
9. </li>
10. <li>
11. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190824719677/valentinesvampires-day-2020">Valentine's/Vampire's Day 2020</a>
12. </li>
13. </ul>
14. (<script>countItems('Feb20')</script>)
15. <li>
16. <button type="button" class="special2" id="monthly">January</button>
17. <ul class="month-inner" id="Jan20">
18. <li>
19. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190499956887/jquery-to-the-rescue">jQuery to the Rescue</a>
20. </li>
21. <li>
22. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190422817747/missionaccomplished">Mission Accomplished</a>
23. </li>
24. <li>
25. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190161104157/tbt-ace-of-base">TBT: Ace of Base</a>
26. </li>
27. <li>
28. <a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190002799642/2020">2020</a>
29. </li>
30. </ul>
31. (<script>countItems('Jan20')</script>)
32. </li> 
33. </ul>
34. (<script>countItems('yr20')</script>)
35. </li> 
You can try it out here as well. I'd appreciate any advice, suggestion and recommendation. Thanks.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

blog archive spacing between the years
[17Replies]
- 23-Feb-2020 12:16 PM
- Forum: Getting Started
Having a problem where the spacing of the years in my archive aren't all the same.

The first two are fine, but then as you look down, it increases, then the last two are fine again. How can I fix this? Here's some code :
1. <style type="text/css">
2. ul {
3. /* These are lists which will have bullet points unless we remove them like this */
4. list-style-type: none;
5. }
6. li {
7. /* These are the individual list items--the years, the months, the links. We want them to have some space between them to look nicer, and we can do that using margin. */
8. margin-top: 10px;
9. margin-bottom: 10px;
10. }
11. button {
12. /* Buttons have borders and backgrounds by default, let's remove those */
13. border:none;
14. background:none;
15. cursor:pointer;
16. color:#741dff;
17. font-family:Overpass, Georgia, Arial, Verdana;
18. font-size:18px;
19. position:relative;
20. top:0px;
21. left:0px;
22. z-index:9999;
23. outline:none;
24. }
25. button::-moz-focus-inner {
26. border: 0;
27. }
28. button:hover {
29. border:none;
30. background:none;
31. cursor:pointer;
32. color:white;
33. font-family:Overpass, Georgia, Arial, Verdana;
34. font-size:18px;
35. position:relative;
36. top:0px;
37. left:0px;
38. z-index:9999;
39. text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 6px 0px 12px #6871b8, -6px 0px 12px #6871b8;
40. }
41. button.special::before {
42. /* :before is a "pseudoelement" which lets us put something on the page (before or after an element, in this case, all buttons) using only CSS */
43. content: "►";
44. /* This has to be inline-block for the transform below to work */
45. display: inline-block;
46. color:#000;
47. font-family:Overpass, Georgia, Arial, Verdana;
48. font-size:18px;
49. position:relative;
50. top:0px;
51. left:0px;
52. cursor:pointer;
53. z-index:9999;
54. text-shadow:none;
55. outline:none;
56. }
57. button.special2::before {
58. /* :before is a "pseudoelement" which lets us put something on the page (before or after an element, in this case, all buttons) using only CSS */
59. content: "►";
60. /* This has to be inline-block for the transform below to work */
61. display: inline-block;
62. color:#741dff;
63. font-family:Overpass, Georgia, Arial, Verdana;
64. font-size:18px;
65. position:relative;
66. top:0px;
67. left:0px;
68. cursor:pointer;
69. z-index:9999;
70. text-shadow:none;
71. outline:none;
72. }
73. #monthly {
74. display: inline-block;
75. color:black;
76. font-family:Overpass, Georgia, Arial, Verdana;
77. font-size:18px;
78. position:relative;
79. top:0px;
80. left:0px;
81. cursor:pointer;
82. z-index:9999;
83. text-shadow:none;
84. }
85. button.flip::before {
86. transform: rotate(90deg);
87. }
88. /* To begin with, we'll hide what's in the year and month listings. The slideDown over in the jQuery will make them appear later. */
89. .year-inner {
90. display: none;
91. }
92. .month-inner {
93. display: none;
94. }
95. .archiveheader {
96. text-decoration:none;
97. color:black;
98. font-family:Laila, Arial, Verdana;
99. position:absolute;
100. top:800px;
101. left:1142px;
102. font-size:21px;
103. z-index:9999;
104. }
105. .blogarchivewrapper {
106. position:absolute;
107. top:820px;
108. left:1100px;
109. width:300px;
110. height:600px;
111. }
112. .bloglinks {
113. font-family:Overpass, Georgia, Arial, Verdana;
114. font-size:18px;
115. color:black;
116. }
117. </style>
"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

having extra buttons in code
[2Replies]
- 19-Feb-2020 11:40 AM
- Forum: Getting Started
Hey, so I have this CSS code :
1. button:before {
2. /* :before is a "pseudoelement" which lets us put something on the page (before or after an element, in this case, all buttons) using only CSS */
3. content: "►";
4. /* This has to be inline-block for the transform below to work */
5. display: inline-block;
6. color:#000;
7. font-family:Overpass, Georgia, Arial, Verdana;
8. font-size:18px;
9. position:relative;
10. top:0px;
11. left:0px;
12. cursor:pointer;
13. z-index:9999;
14. text-shadow:none;
15. }
And am having problems with it. The problem is that this code has given me 3 extra buttons which you can see here at the top left. My question is, how can I rid these buttons? I have heard something about scoping which can do this, but am not sure. I'm so new to that.

jQuery slideToggle firing more than once on one click
[20Replies]
- 06-Feb-2020 04:04 PM
- Forum: Getting Started
Hi. I'm having problems where when I click my blog archive's button to open, the first <div> container will slide open then closed then open. This happens 3 times and stops. Does anyone know why? I can share the code as to where the problem may be happening.
1. <script>
  $(document).ready(function () {
      $('.myBtn').click(function () {
          $(".container").add('.container2').slideToggle("slow", function () {
              if ($(".container2").is(':visible'))
                  $(".myBtn2").addClass('flip');
  1. else
                  $(".myBtn").removeClass('flip');
         });
      });
  });
  </script>
1. <script>
  $(document).ready(function (){
  $('.myBtn').click(function (){
     $(".myBtn2").animate({top: '1602px'}, 1200);
      $(".container2").animate({top: '1600px'}, 1200);
       $(".year2").animate({top: '1600px'}, 1200);
         $(".myInnerBtn2").animate({top: '1634px'}, 1200);
         $(".myInnerBtn3").animate({top: '1748px'}, 1200);
         $(".myInnerBtn4").animate({top: '2083px'}, 1200);
         $(".myInnerBtn5").animate({top: '2240px'}, 1200);
         $(".myInnerBtn6").animate({top: '2531px'}, 1200);
         $(".myInnerBtn7").animate({top: '3042px'}, 1200);
         $(".myInnerBtn7a").animate({top: '3113px'}, 1200);
         $(".myInnerBtn7b").animate({top: '3183px'}, 1200);
         $(".myInnerBtn7c").animate({top: '3253px'}, 1200);
         $(".myInnerBtn7d").animate({top: '3368px'}, 1200);
         $(".myInnerBtn8").animate({top: '3437px'}, 1200);
         $(".myInnerBtn9").animate({top: '3632px'}, 1200);
         $(".myInnerBtn10").animate({top: '3792px'}, 1200);
         $(".myInnerBtn11").animate({top: '3861px'}, 1200);
         $(".myInnerBtn12").animate({top: '4020px'}, 1200);
         $(".myInnerBtn13").animate({top: '4135px'}, 1200);
         $(".myInnerBtn14").animate({top: '4248px'}, 1200);
         $(".myInnerBtn15").animate({top: '4362px'}, 1200);
         $(".myInnerBtn16").animate({top: '4698px'}, 1200);
         $(".myInnerBtn17").animate({top: '4768px'}, 1200);
         $(".myInnerBtn18").animate({top: '4970px'}, 1200);
         $(".myInnerBtn19").animate({top: '5173px'}, 1200);
         $(".myInnerBtn20").animate({top: '5367px'}, 1200);
         $(".myInnerBtn21").animate({top: '5570px'}, 1200);
         $(".myInnerBtn22").animate({top: '5728px'}, 1200);
         $(".myInnerBtn23").animate({top: '5930px'}, 1200);
         $(".myInnerBtn24").animate({top: '6045px'}, 1200);
         $(".myInnerBtn25").animate({top: '6115px'}, 1200);
         $(".myInnerBtn26").animate({top: '6229px'}, 1200);
         $(".myInnerBtn27").animate({top: '6431px'}, 1200);
         $(".myInnerBtn28").animate({top: '6635px'}, 1200);
         $(".myInnerBtn29").animate({top: '6748px'}, 1200);
         $(".myInnerBtn30").animate({top: '6996px'}, 1200);
         $(".myInnerBtn31").animate({top: '7258px'}, 1200);
         $(".myInnerBtn32").animate({top: '7416px'}, 1200);
         $(".myInnerBtn33").animate({top: '7620px'}, 1200);
         $(".myInnerBtn34").animate({top: '7821px'}, 1200);
         $(".myInnerBtn35").animate({top: '8112px'}, 1200);
         $(".myInnerBtn36").animate({top: '8490px'}, 1200);
         $(".myInnerBtn37").animate({top: '8738px'}, 1200);
         $(".myInnerBtn38").animate({top: '8890px'}, 1200);
  });
  });
  </script>
I think the problem lies within the 2nd code here. I also have the HTML and CSS parts if that helps, but I really feel that the problem is within these codes

jQuery newbie with a major problem
[2Replies]
- 21-Jan-2020 11:19 AM
- Forum: Getting Started
Hi all, I just signed in to this forum, and need help please. I'm having a major mix up of my blog archives where I have three of my links that do not show all of my entries when opened. I have some screen shots to show what I am stuck with. It's really weird haha. I hope someone can help. Many thanks for reading.

So here is the jQuery side...

This opens nicely, but partially, thanks to that red button up there, with the help of the above jQuery.

And here are the rest of the entries which should belong under that 2019, but this white button here under 2018 opens it instead....

I can't seem to wrap my head or heels around this mess . Many thanks again.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend