I followed Martha's suggestion here:
if page is default then include if not default then
And I am missing something, as I can't get it to display the slider.
Here is the slider code, and how I am using Martha'e suggestion.
This is the slider (bootstrap carousel) code (to be integrated with Martha's suggestion)
<div class="jumbotron">
<div class="container">
<div class="row fz-slider-wrap">
<div class="col-md-4 fz-slider-caption">
DFD Fioriere
</div>
<div class="col-md-8 fz-slider-image">
<div id="fz-gallery-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#fz-gallery-slider" data-slide-to="0" class="active"></li>
<li data-target="#fz-gallery-slider" data-slide-to="1"></li>
<li data-target="#fz-gallery-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="fz-img-box" src="images/slider/03.jpg" alt="slider 1" />
</div>
<div class="item">
<img class="fz-img-box" src="images/slider/01.jpg" alt="slider 2" />
</div>
<div class="item">
<img class="fz-img-box" src="images//slider/06.jpg" alt="slider 3" />
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .jumbotron -->
This is what happens:
If I put the above code inside
<%
Sub DisplaySlider()
slider code
%>
<%
End Sub
%>
I get this error when loading default.asp
Microsoft VBScript compilation error '800a0400'
Expected statement
/afz_includes/jumbotron.asp, line 3
If I wrap slider code in ' I get same error but line 4
If I wrap slider code in " I get same error (line 3)
I also tried to wrap each line of slider code with ", and chnaged the " of classes and ids to ', but keep getting th error.
Here is what I put on the default.asp, and the other pages
<!-- #include virtual="/afz_includes/slider.html" -->
<%
scriptname = Request.ServerVariables("Script_Name")
If InStr(scriptname, "default.asp") > 0 Then
DisplaySlider
Else
Response.Write "<div class='fz-v-spacer-top'></div>"
End If
%>
I am not sure if it was a typo, anyhow I tried to save the slider both as html, and asp, but same error.
It looks like you've put the slider's code inside the ASP code delimiters (the <% and %>), so the compiler is trying to treat it as VBScript, which it obviously isn't.
In ASP classic, you put your server-side VBScript code inside <% %> blocks. HTML code does not go inside those blocks, unless you're Response.Write-ing it.
<%
Sub DisplaySlider()
%>
<div class="jumbotron">
<div class="container">
...
</div>
</div><!-- .jumbotron -->
<%
End Sub
%>
Related
I'm using Capybara to test that my Ruby/Sinatra application renders the pages correctly.
I been able to test that the page contains certain values, with statements like the following:
expect(page).to have_content('Campaign_1')
However, what I want to do is check that specific elements of the page contain the expected values.
For instance, the various 'child' elements of:
<li id="campaign_1" style="margin-bottom:25px">
such as the 'media-heading name' child element has the value 'Campaign_1', as per the code snippet below:
<h6 class="media-heading name">Campaign_1</h6>
or that the 'media-heading country' child element has the value 'United Kingdom' as per the code snippet below:
<h6 class="media-heading country">United Kingdom</h6>
Below is a copy of the .erb file contents.
<ul class="list-group" >
<% #all_campaigns.each do |campaign| %>
<a href="/campaign/<%= campaign.name %>" style="text-decoration: none">
<li id="<%= campaign.name.downcase %>" style="margin-bottom:25px">
<div class="media">
<div class="media-left">
<img src="/images/<%= campaign.image %>.jpeg" class="media-object">
</div>
</div>
<br>
<div class="media-body">
<h6 class="media-heading name"><%= campaign.name %></h6>
<br>
<div class="left_right_Container">
<h6 class="media-heading country"><%= campaign.country %></h6>
<h6 class="media-heading sector"><%= campaign.sector %></h6>
</div>
<br>
<br>
<h5 class="media-heading target_amount">Target Amount: £<%= campaign.target_amount %></h5>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:<%= campaign.percentage %>%">
<span class=""><%= campaign.percentage %>% Funded</span>
</div>
</div>
</li>
</a>
<% end %>
</ul>
The above .erb file results in the HTML below (there's more, this is just a snippet) being created when the app runs:
<li id="campaign_1" style="margin-bottom:25px">
<div class="media">
<div class="media-left">
<img src="/images/Image_1.jpeg" class="media-object">
</div>
</div>
<br>
<div class="media-body">
<h6 class="media-heading name">Campaign_1</h6>
<br>
<div class="left_right_Container">
<h6 class="media-heading country">United Kingdom</h6>
<h6 class="media-heading sector">Automotive</h6>
</div>
<br>
<br>
<h5 class="media-heading target_amount">Target Amount: £1000000</h5>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="">93% Funded</span>
</div>
</div>
</li>
You just need to expect on the element you wish to check inside - for instance
heading = page.find('li#campaign_1 .media-heading.name')
expect(heading).to have_content('Campaign_1')
Another option (more useful when you have a few things to check) is the within method which scopes what page refers
within 'li#campaign_1 .media-heading.name' do
# here page will refer to the .name element
expect(page).to have_content('Campaign_1')
end
Finally, you could just do it all in one expectation using the text or exact_text options
expect(page).to have_css('li#campaign_1 .media-heading.name', text: 'Campaign_1')
Combining a couple of those methods together would give
within 'li#campaign_1' do
expect(page).to have_css('.media-heading.name', text: 'Campaign_1'
expect(page).to have_css('.media-heading.country', text: 'United Kingdom')
end
Hello I have seen similar questions been asked but could not find a tutorial on how to create a dynamic bootstrap carousel in ruby on rails. The admin of my site needs to be able to browse and upload images rather than having to change any code. I have tried a carrier wave approach but was unable to get it working.
Here is my current carousel which is hard coded.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('assets/banner2.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('assets/Banner3.png')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('assets/SaleHero1.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Obviously at the moment if you want to change the images to something else it has to be done through the code. Could some point me in the right direction to get this task completed. Thank you :)
Assuming you can figure out how to upload images using carrier wave, you'll need to use ERB in your views.
<% #images.each do |image| %>
<div class="carousel-item" style="background-image: <%= images.url %>)">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<% end %>
You'll need to create a mode like image.rb which would need to store the images uploaded URL assuming you'll use an AWS S3 bucket. Then you'll need your code to store the url of the images in an attribute like url
Then in your controller you'll need something like:
def index
#images = Image.all.limit(10) # or however many images you wanna use
end
this is my first post
just the site i needed cause im kinda new to all this
im trying to validate my page and there is 1 error that i dont know what to do with
Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
if i remove the div part
my page is not looking the same as it does with it and it works on all browsers right now with the errors
this is the piece of code that is making the error
<div class="picture_content margin-left">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
any help on how to fix this would be apreciated alot
thanks for taking the time
btw i downloaded a bootstrap temp and the Original file has the same errors
The error is
<ul class="image_box_story2">
a ul is a list and can only have li children, not div, that list doesn't have any li children at all.
Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.
I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.
Here is a jsfiddle example of the problem occurring.
http://jsfiddle.net/Lu82ba9L/1/
The code from the example is repeated here
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.
I'm developing an AJAX site. So the problem is browsers (Safari, Chrome) do not show spaces in AJAX-loaded HTML content after tags like Strong, Em etc.
Then I added a doctype to the AJAX output. Everything was fine, there were all spaces, unless I tested the site in WebKit browsers. When I loaded the page in Safari, I got error:
This page contains the following errors:
error on line 1 at column 7: internal error
Below is a rendering of the page up to the first error.
What do I got to do?
Or, in other words, is there any way to output the doctype for WebKit without getting the error?
Output is something like that:
<div class="topic">
<div class="colon">
<div class="topictext">
<h2>KirillTitov tells us:</h2><p>Here you go.<br/>
<b>Bold text</b> <i>italic text</i> <strike>etc</strike>…</p>
</div><!-- topictext -->
<div class="topicright"></div>
<div class="clear"></div>
<div class="topicinfo">
<div class="topicclock">
<font title="Timestamp for geeks — 1253816398">24 september, year 2009</font>
</div><!-- topicclock -->
<div class="topiccomment">
Go inside (мнений: 0)
</div><!-- topiccomment -->
</div><!-- topicinfo -->
<div class="topicindex">
<img src="/img/bgtopicindex.gif" border="0" alt="" />
</div><!-- topicindex -->
<div class="blur"></div>
</div><!-- colon -->
<div class="colon">
<div class="indextopcomment">
<div class="commenttopleft"><img src="/img/bgcommentindexgreen.gif" alt="" border="0" /></div>
<div class="texttopcomment nonenew">
No comments here.
</div>
<div class="clear"></div>
</div><!-- indextopcomment -->
</div><!-- colon -->
<div class="clear"></div>
</div><!-- topic -->
<div class="clear"></div>
</div><!-- topic -->
Have you thought about using in those places?
Also, try the following on your incoming ajax result:
.Replace("\xA0", " ").Replace("\x20"," ");
Some frameworks behave odd in webkit and put not-standard spacing in, is what what you're seeing? Follow-up on if the replace works, if not there are other options, but that's usually the simplest/quickest fix. Here's a full table on the whitespace oddities, but it depends on browser/platform as to which quirk you're hitting normally.