#StackBounty: #html #css #xml #ms-word #pandoc from HTML <figure> and <figcaption> to Microsoft Word

Bounty: 50

I have an HTML with thefigure, img and figcaption tags and I would like to get them converted to a Microsoft Word document`.

The image referred by img should be inserted in the Word document and the figcaption should be converted to its caption (also keeping the figure number).

I have tried to open the html with Word 2013 but the figcaption is not converted as the figure caption but it is just a simple text below the image.

Is there any minimum working sample to get it done? I had a look at https://en.wikipedia.org/wiki/Microsoft_Office_XML_formats#Word_XML_Format_example but it is too verbose to grab just an Hello world sample.

figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}
article {
  counter-reset: figures;
}

figure {
  counter-increment: figures;
}

figcaption:before {
  content: "Fig. " counter(figures) " - "; /* For I18n support; use data-counter-string. */
}
<figure>
<p><img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/ca/Matterhorn002.jpg"></p>
<figcaption>Il monte Cervino.</figcaption>
</figure>

<figure>
<p><img class="image" src="https://upload.wikimedia.org/wikipedia/commons/2/26/Banner_clouds.jpg"></p>
<figcaption>La nuvola che spesso รจ vicino alla vetta.</figcaption>
</figure>

I tried with pandoc

pandoc -f html -t docx -o hello.docx hello.html

but with no luck, as you can see the “Fig. 1” and “Fig. 2” is missing:

enter image description here

My pandoc is:

c:temp>.pandoc.exe -v
pandoc.exe 1.19.2.1
Compiled with pandoc-types 1.17.0.4, texmath 0.9, skylighting 0.1.1.4
Default user data directory: C:UsersaleAppDataRoamingpandoc
Copyright (C) 2006-2016 John MacFarlane
Web:  http://pandoc.org
This is free software; see the source for copying conditions.
There is no warranty, not even for merchantability or fitness
for a particular purpose.


Get this bounty!!!

#StackBounty: #javascript #html #internet-explorer #jsf onchange event and programmatic input value change conflict on IE

Bounty: 50

I’ve noticed that in different versions of Internet Explorer the onchange event is not captured when the value of an input is altered by a js function, behavior that does not occur with other browsers such as Mozilla or Chrome.

Investigating a little I found that the correct operation of onchange in IE is not guaranteed when the value is altered by js:

Example (test on IE):

function onchangeRequest(){
  console.log('onchange fired');
}

function changeValue (input){
        input.value +=  "add"
 }
<h4> focus lost doesnt invoke onchangeRequest() </h4>

<input id="valueInput"  onkeyup="changeValue(this);" onchange="onchangeRequest();" />

<h4> focus lost invokes onchangeRequest() </h4>

<input id="valueInput" onchange="onchangeRequest();" />

I have not found a convincing explanation of the reasons why IE does not solve those situations correctly and although there are alternatives to get the same behavior, such as implementing onchange withonfocs and onblur saving the previous value of the input and Checking if there were changes, I would like to know the reasons why this behavior occurs.


Get this bounty!!!

#StackBounty: #javascript #jquery #html #actionscript-3 #flash reload embedded swf in html page in IE

Bounty: 50

I have a swf file embedded in a html page. I want to reload the swf file without refreshing the page.

There is a same problem asked here: reload/ reset embedded swf on click

And I tried the accepted answer and it works in chrome:

var obj = $("object#flash_99674493");
obj.html(obj.html());

But it seems it doesn’t work in IE. How to make it work in IE?


Get this bounty!!!

#StackBounty: #html #r #shiny shiny, timevis and html templates

Bounty: 100

i’m having a problem displaying a timevis in an html block in shiny.

the following code is the base example which works:

library(shiny)
library(timevis)

data <- data.frame(
  id      = 1:4,
  content = c("Item one", "Item two",
              "Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11",
              "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA, NA, "2016-02-04", NA)
)

ui <- bootstrapPage(
  timevisOutput("timeline")
)

server <- function(input, output, session) {
  output$timeline <- renderTimevis({
    timevis(data)
  })
}

shinyApp(ui = ui, server = server)

however if i use an html template and try to display the content this does not appear. here is sample code

   library(shiny)
    library(timevis)

ui <- bootstrapPage(
            tags$div(id="page-content-wrapper", 
                    timevisOutput("timeline")
                    )
)

server <- function(input, output, session) {
      output$timeline <- renderTimevis({
      timevis(data)
    })



  }

  shinyApp(ui = ui, server = server)

and the html containing the reference

any idea why this happens? am i missing something? (i.e. appropriate inclusion of js libs in either the app’s header or html file?) if anyone has a working example with htmlwidgets, that could be an alternative too, but i cannot get anything to work at the moment

suggestions very welcome! thanks


Get this bounty!!!

#StackBounty: #javascript #jquery #html #cordova #wcf How to display set access permission & display /hide div based on database va…

Bounty: 50

i want to set access permissions page where setting the permissions to the user to only view selected div’s only for ex:

There are 5 checkboxes in admin page and 5 div’s in user page if check 3 div user has to get 3 div only i am mapping userlocation & client location & username for setting access permissions and how to display / hide the div in user page based on the checkbox selection or database values?

There is user login separately and admin login separately . Her admin will disable certain features for certain users. using wcf rest and sql server as backend


Get this bounty!!!

#StackBounty: #javascript #jquery #html #css #google-maps Google Maps in jQuery Accordion works in jsFiddle, but maps do not load on my…

Bounty: 50

I am trying to simply make an expanding list of Google Maps which allow you to locate an item. Here I have a static HTML page where you can click records and they will expand to show you a Google Map. The map, however, only comes through as grey until you resize the page.

Here is the page with the problem (the extension says php, but it doesn’t actually have any): https://yt074.addons.la/tmp/track/list.php

I’m already calling google.maps.event.trigger(maps[i], 'resize'); within the code (as you can see by viewing source), and I have tried jQuery(window).trigger('resize');, window.dispatchEvent(new Event('resize')); and a few others to simulate a resizing of the window, but to no avail.

Here is a jsFiddle with the code from above literally copy/pasted into the fiddle and it works: https://jsfiddle.net/myingling/Lkdmp1zo/

Or here is a shorter version on my server which is not working: https://yt074.addons.la/tmp/track/fiddle.php

What am I missing on my server? Server is ubuntu running nginx on an AWS EC2 cluster, but once the code is client-side I don’t understand why that would matter (but better safe to explain).


Get this bounty!!!

#StackBounty: #html #email #url #mailto #outlook-web-app Outlook webmail access mailto body is blank

Bounty: 50

I am trying to create a mailto url for Outlook (web version).

On Outlook everything works perfectly fine, but now I have to implement it on web version OWA as well, so I am struggling with this url:

<a href='https://company.domain.com/owa/?ae=Item&a=New&t=IPM.Note&to=someone@expample.com&subject=Hello%20again&body=Body%20Text' target=_blank>testy</a>

Because the body part is empty. Any ideas on what’s happening?


Get this bounty!!!

#StackBounty: #html #http #firefox #nginx #iframe <iframe> and <object> are both blank, but only in Firefox

Bounty: 150

I am attempting to embed one site into another site. I control both servers, which I will refer to here as “site1.com” (the site in the browser) and “site2.com” (the site I am trying to embed).

HTML embed code

Attempt 1, using iframe tag:


    Unable to display--your browser does not support frames.

Attempt 2, using object tag:


Things I know are not the problem

Secure/insecure mismatch

I’ve read that Firefox will not allow an HTTP embed into an HTTPS page. Both sites are HTTPS, so there is no mismatch. The loaded resources (CSS, etc) are also https, from same origin, so there is no mixed-content problem.

I have tried setting security.mixed_content.block_active_content to false, in case I was mistaken about this, but the iframe was still blank.

Invalid or untrusted certificates

Both sites are using valid certificates, signed by a proper trusted authority, and are not expired. In fact, we are using a subdomain wildcard certificate, so they are both using the same certificate (they both are in the same subdomain).

X-Frame-Options

The site that I am trying to embed has this response header:

X-Frame-Options: ALLOW-FROM SITE1.COM

Content-Security-Policy

The site that I am trying to embed has this response header (wrapped here for readability):

Content-Security-Policy:
    frame-ancestors https://site1.com;
    default-src 'self';
    script-src https://site1.com 'self' 'unsafe-inline';
    style-src https://site1.com 'self' 'unsafe-inline'

Extra disclosure, possibly not needed – these headers are being generated by a Django application server, using this config and the “django-csp” module.

X_FRAME_OPTIONS = 'Allow-From site1.com'

CSP_FRAME_ANCESTORS = ('https://site1.com',)
CSP_STYLE_SRC = ('https://site1.com', "'self'", "'unsafe-inline'")
CSP_SCRIPT_SRC = ('https://site1.com', "'self'", "'unsafe-inline'")

CORS

My understanding is that CORS is only in play when the request contains an “Origin” header. That doesn’t seem to be happening here. I have also tried addressing CORS by using this header:

Access-Control-Allow-Origin: https://site1.com

But that appears to have no effect.

Ad blocker

I do not have an ad blocker in this Firefox install. I also removed all of my extensions and re-tested after a Firefox restart, the “blank iframe” behavior remains the same with no extensions installed at all.

Observed behavior

I have tested using the following browsers.

  • Google Chrome 58.0.3029.81 (64-bit) (macOS)
  • Safari 10.1 (macOS)
  • Firefox 53.0 (64-bit) (macOS)
  • Microsoft Edge 38.14393.0.0 (Windows 10)

Using Chrome, Safari, and Edge, the frame is shown like I expect – site2.com appears as a box inside of the site1.com page.

Using Firefox, I am shown an empty space of the size specified (600×600). If I used iframe, then there is a black border around it. If I used object, it’s just a blank area with no border.

The most interesting thing is that if I open the developer console and reload the page, I see the requests to fetch site1.com and its CSS and so on, but there are no requests made for site2.com. It isn’t that there is a problem showing site2.com, it is never requested at all.

Also, the developer console shows no errors or warnings about this. If there were an error condition or security exception preventing the loading of the second site, I would expect some sort of warning to be logged.

This has been driving me crazy for a few days. Any suggestions appreciated.


Get this bounty!!!

#StackBounty: #javascript #jquery #html How to use JQuery InputMask with HTML pattern

Bounty: 50

I have HTML input box for phone numbers.

I’m using InputMask to format input 860000000 in following:

8 600 00 000

I’m also using HTML pattern to check if numbers starts with 86 and there are total 9 digits, but with InputMask it stopped working, and can’t achieve It in any way:

<label for="phone" class="first-col">Mobile No.:</label>
<input type="text" id="phone" placeholder="8 600 00 000" required pattern="(86)d{7}" />

Have you any ideas?

There is JS Fiddle


Get this bounty!!!

#StackBounty: #html #ios #css z-index treated differently on iOS when setting -webkit-overflow-scrolling: touch

Bounty: 50

I’m seeing some interesting z-index behaviour on iOS.

My sample code can be viewed here: https://jsfiddle.net/59mo8s16/4/

I need the #sidebar to be displayed in front of the #slide-in-tip. This is the case when viewed on Chrome (PC and Android) and Firefox (PC). However, on iOS Safari and Chrome, #slide-in-tip appears in front of #sidebar.

I’ve realised that removing -webkit-overflow-scrolling: touch from the CSS makes it appear as intended across all platforms/browsers. However, I need this in order to provide momentum scrolling for the #container div on iOS. Without it, you get that scrolling that stops as soon as you stop swiping, which provides a terrible user experience.

Any ideas on how to resolve this one? Ideally I’d like a CSS-only solution. Any significant restructure of HTML will cause me some major pain at this point. The sample is a really stripped back version of an already-complete website.

HTML:

<

div class=”snippet”>

<

div class=”snippet-code”>

html,
body {
  height: 100%;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

#top-bar {
  top: 0;
  width: 100%;
  z-index: 200;
  background-color: green;
  height: 85px;
  position: absolute;
}

#sidebar {
  float: left;
  padding: 30px;
  background-color: pink;
  position: fixed;
  width: 310px;
  left: 0px;
  z-index: 150;
  top: 85px;
  bottom: 0px;
  padding: 0;
  padding-bottom: 50px;
}

#container2 {
  min-height: 100%;
}

#main {
  padding-right: 20px;
  height: 100%;
  margin: 0;
  margin-left: 10%;
  line-height: 40px;
  text-align: right;
}

#container {
  height: 100%;
  margin: 0;
  position: absolute;
  width: 100%;
  overflow-y: scroll;
}

#container2 {
  padding-top: 75px;
}

#slide-in-tip {
  position: fixed;
  bottom: 0;
  text-align: right;
  width: 100%;
  z-index: 140;
  background-color: blue;
  height: 200px;
}
top-bar
long content - see js fiddle for actual long content
</div> </div>
slide-in-tip