Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by UName10
at 2024-10-08 15:34:03
ModifyPoint:500 Replies:4 POST_ID:828764USER_ID:11668
Topic:
JavaScript;;
On my page here I'm trying to change the width of the list items (in the middle, containing images) under ul class="bxslider".
The javascript to change the width and margin is:
The javascript to change the width and margin is:
<script type="text/javascript"> $(document).ready(function(){$('.bxslider').bxSlider({ minSlides: 3, maxSlides: 4, slideWidth: 170, slideMargin: 10}); });</script> 1:2:3:4:5:6:7:8:9:10:11:
Every time I change the margin e.g. from 10 to 15, the fadein javascript for the images doesn't work, whether it's placed before or after the bxslider javascript.
I just need to edit the bxslider CSS and javascript without affecting the fadein javascript.
The html and javascript for the homepage is:
<"h2>"Featured Brentwood Restaurants<"/h2>"<"ul class="bxslider">" <"li>"<"a href="/brentwood/restaurants/chinese-restaurants/mizu-brentwood-402.html">"<"img alt="Mizu Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/mizu.jpg" />"<"div>"<"h3>"Mizu<"/h3>"<"span>"Chinese Restaurants<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/fine-dining/masons-restaurant-brentwood-458.html">"<"img alt="Masons Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/masons.jpg" />"<"div>"<"h3>"Masons<"/h3>"<"span>"Fine Dining<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/gastropubs/nags-head-399.html">"<"img alt="Nags Head Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/nags-head.jpg" />"<"div>"<"h3>"Nags Head<"/h3>"<"span>"Gastro Pubs<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/indian-restaurants/rajmoni-indian-restaurant-485.html">"<"img alt="Rajmoni Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/rajmoni.jpg" />"<"div>"<"h3>"Rajmoni<"/h3>"<"span>"Indian Restaurants<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/fine-dining/smiths-restaurant-456.html">"<"img alt="Smiths Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/smiths.jpg" />"<"div>"<"h3>"Smiths Restaurant<"/h3>"<"span>"Fine Dining<"/span>"<"/div>"<"/a>"<"/li>"<"/ul>"<"h2>"Featured Brentwood Hair and Beauty<"/h2>"<"ul class="bxslider">" <"li>"<"a href="/brentwood/hair-and-beauty/beauty-salons-and-spas/the-beauty-studio-brentwood-481.html">"<"img alt="Beatuy Studio Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/beauty-studio.jpg" />"<"div>"<"h3>"The Beauty Studio<"/h3>"<"span>"Beauty Salons<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/hair-and-beauty/beauty-salons-and-spas/tres-chic-beauty-572.html">"<"img alt="Tres Chic Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/johannas.jpg" />"<"div>"<"h3>"Tres Chic Beauty<"/h3>"<"span>"Beauty Salons<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/hair-and-beauty/hairdressers/vicky-newman-hair-and-make-up-583.html">"<"img alt="Vicky Newman Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/vickynewman.jpg" />"<"div>"<"h3>"Vicky Newman Hair<"br />"&"amp;" Makeup<"/h3>"<"span>"Beauty Salons<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/hair-and-beauty/beauty-salons-and-spas/inula-beauty-571.html">"<"img alt="Inula Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/inula.jpg" />"<"div>"<"h3>"Inula Beauty<"/h3>"<"span>"Beauty Salons<"/span>"<"/div>"<"/a>"<"/li>"<"/ul>"<"h2>"Featured Brentwood Shopping<"/h2>"<"ul class="bxslider">" <"li>"<"a href="/brentwood/shops-and-shopping/farm-shops/frenches-farm-organic-butchers-shop-588.html">"<"img alt="Frenches farm Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/frenchesfarm.jpg" />"<"div>"<"h3>"Frenches Farm Shop<"/h3>"<"span>"Farm Shops<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/shops-and-shopping/florists/chris-evans-fleur-decor-433.html">"<"img alt="Chris Evans Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/chris-evans.jpg" />"<"div>"<"h3>"Chris Evans Fleur Decor<"/h3>"<"span>"Florists<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/shops-and-shopping/shoe-shops/candy-says-vintage-clothing-556.html">"<"img alt="Candy Says Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/candysays.jpg" />"<"div>"<"h3>"Candy Says Vintage<"/h3>"<"span>"Clothes Shops<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/shops-and-shopping/furniture-shops/tides-home-and-garden-587.html">"<"img alt="Tides Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/tides.jpg" />"<"div>"<"h3>"Tides Home &"amp;" Garden<"/h3>"<"span>"Furniture<"/span>"<"/div>"<"/a>"<"/li>"<"/ul>"<"h2>"Featured Brentwood Tradesmen<"/h2>"<"ul class="bxslider">" <"li>"<"a href="/brentwood/tradesmen/bathrooms-and-kitchens/vision-interiors-404.html">"<"img alt="Vision Interiors Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/vision.jpg" />"<"div>"<"h3>"Vision Interiors<"/h3>"<"span>"Bathrooms and Kitchens<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/tradesmen/plumbers-and-central-heating/timmins-property-services-411.html">"<"img alt="Timmins Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/timmins.jpg" />"<"div>"<"h3>"Timmins Property Services<"/h3>"<"span>"Plumbers<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/tradesmen/locksmiths/kat-master-locksmiths-468.html">"<"img alt="KAT Locksmiths Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/kat.jpg" />"<"div>"<"h3>"KAT Master Locksmiths<"/h3>"<"span>"Locksmiths<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/tradesmen/builders-and-bricklayers/allied-group-403.html">"<"img alt="Allied Group Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/allied.jpg" />"<"div>"<"h3>"Allied Group<"/h3>"<"span>"Builders and Bricklayers<"/span>"<"/div>"<"/a>"<"/li>"<"/ul>"<"h2>"Featured Brentwood Bars and Pubs<"/h2>"<"ul class="bxslider">" <"li>"<"a href="/brentwood/pubs-and-bars/bars/lot-75-cafe-bar-412.html">"<"img alt="Lot 75 Cafe Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/lot75.jpg" />"<"div>"<"h3>"Lot 75<"/h3>"<"span>"Bars<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/gastropubs/the-greyhound-brentwood-487.html">"<"img alt="The Greyhound Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/greyhound.jpg" />"<"div>"<"h3>"The Greyhound<"/h3>"<"span>"Pubs<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/nightlife/bars/the-teriss-bar-565.html">"<"img alt="Teriss Bar Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/teriss.jpg" />"<"div>"<"h3>"The Teriss Bar<"/h3>"<"span>"Bars<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/nightlife/pubs/horse-and-groom-593.html">"<"img alt="Horse and Groom Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/horsegroom.jpg" />"<"div>"<"h3>"The Horse &"amp;" Groom<"/h3>"<"span>"Pubs<"/span>"<"/div>"<"/a>"<"/li>" <"li>"<"a href="/brentwood/restaurants/gastropubs/the-tower-arms-484.html">"<"img alt="Tower Arms Brentwood" class="lazy" src="/images/grey.gif" data-original="/images/featured/tower-arms.jpg" />"<"div>"<"h3>"Tower Arms<"/h3>"<"span>"Pubs<"/span>"<"/div>"<"/a>"<"/li>"<"/ul>"<"br />"<"div class="main_section clearfix">" <"div class="item">" <"a href="/<"%=lcase(Session("PublicFranchiseName"))%>"/business-directory/index.html" title="View <"%=Session("PublicFranchiseName")%>" Business Directory">" <"img class="lazy" alt="View Business Directory" src="/images/grey.gif" data-original="/images/home/directory_section.jpg" />" <"span class="main_h3">"<"span class="arrow_right">"<"/span>" Business Directory<"/span>" <"/a>" <"/div>" <"div class="item last">" <"a href="/<"%=lcase(Session("PublicFranchiseName"))%>"/events/index.html" title="View <"%=Session("PublicFranchiseName")%>" Events">" <"img class="lazy" alt="View Events" src="/images/grey.gif" data-original="/images/home/events_section.jpg" />" <"span class="main_h3">"<"span class="arrow_right">"<"/span>" Events<"/span>" <"/a>" <"/div>"<"/div>"<"div class="main_section clearfix">" <"div class="item">" <"a href="/<"%=lcase(Session("PublicFranchiseName"))%>"/news/index.html" title="View <"%=Session("PublicFranchiseName")%>" News">" <"img class="lazy" alt="View News" src="/images/grey.gif" data-original="/images/home/news_section.jpg" />" <"span class="main_h3">"<"span class="arrow_right">"<"/span>" Local News<"/span>" <"/a>" <"/div>" <"div class="item last">" <"a href="/<"%=lcase(Session("PublicFranchiseName"))%>"/pages/advertise.html" title="Advertise to <"%=Session("PublicFranchiseName")%>"">" <"img class="lazy" alt="Advertise" src="/images/grey.gif" data-original="/images/home/advertise_section.jpg" />" <"span class="main_h3">"<"span class="arrow_right">"<"/span>" Advertise<"/span>" <"/a>" <"/div>"<"/div>"<"script type="text/javascript">" $("img.lazy").lazyload({ effect: "fadeIn" });"<"/script>"<"script type="text/javascript">"$("img.lazy").show().lazyload();"<"/script>"<"script type="text/javascript">" $(document).ready(function(){$('.bxslider').bxSlider({ minSlides: 3, maxSlides: 4, slideWidth: 170, slideMargin: 10});" });"<"/script>" 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59:60:61:62:63:64:65:66:67:68:69:70:71:72:73:74:75:76:77:78:79:80:81:82:83:84:85:86:87:88:89:90:91:92:93:94:95:96:97:98:99:100:101:102:103:104:105:
Any help appreciated.
Author: UName10 replied at 2024-11-28 02:16:32
This question was not abandoned
Assisted Solution
Author: UName10 replied at 2024-11-23 08:23:11
Sorry - I'm not allowed to ask questions so I'll have to accept answers now as it's saying these are abandoned which they are not.
Author: UName10 replied at 2024-11-23 08:06:53
Thanks for this and sorry for the delay - bit behind!
I#ll check it out and come back, thanks.
I#ll check it out and come back, thanks.
Accepted Solution
Expert: duncanb7 replied at 2024-11-01 06:45:31
500 points AVERAGE
Did you take a look those callback function for bxslider at
https://github.com/wandoledzep/bxslider-4
for onSliderload ,before, after to include fadein function.
and check those example from bxslider.com
http://bxslider.com/examples
Callbacks
onSliderLoad Executes immediately after the slider is fully loaded
default: function(){}
options: function(currentIndex){ // your code here }
arguments:
currentIndex: element index of the current slide
onSlideBefore Executes immediately before each slide transition.
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideAfter Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
https://github.com/wandoledzep/bxslider-4
for onSliderload ,before, after to include fadein function.
and check those example from bxslider.com
http://bxslider.com/examples
Callbacks
onSliderLoad Executes immediately after the slider is fully loaded
default: function(){}
options: function(currentIndex){ // your code here }
arguments:
currentIndex: element index of the current slide
onSlideBefore Executes immediately before each slide transition.
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideAfter Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
