I have the code, I need it to get a csv file with the following contents.
src of img.myImg; content of EAN: Z88799010290
I tried, but no luck how merge two foreach:
foreach($html->find('img.myImg') as $e)
echo $e->src . '<br>;';
foreach($html->find('div.EANN') as $ean)
echo $ean. ';<br>';
<div id="wybr_45" alt="-8204" class="listProduct"><div id="d4b">
<div class="fl fotoimage">
<div class="listLink1"> <a href="#" onclick="changeData('popshop','Mainframe','showModuleNew','DeepProductSelect',1234,1234);" >
<img src="http://example/script.php?a=87x112&t=B2B.BSDTrade&i=-441" class="myImg" alt="w"/> </a>
</div>
</div>
<div class="fl descriptionColumn">
<div class="lpTitle2 listName"><b> GATTA: MICHELLE LOVE pończochy samonośne wz.03</b></div>
<div class="lpTitle2"><!-- <a href="#" >brak opisu </a> --></div>
<span class="lpTitle2">Kod:</span><b>-8204</b>
<div class="EANN">000245035190</div><div class="lpTitle2 producer">Producent: <a style="font-size: 12px; color: #555;" href="#">GATTA</a></div>
</div>
<div class="marketIndex">
<div class="priceColumn"> <span class="oldPrice1">
</span></div>
<div class="OrderCpl"><span class="addtoOrderL" onclick="deepProductTable_showForProduct(-8204);" >
<span onclick="deepProductTable_showForProduct(-8204);" class="addtobasket"/> </span></div>
</div></div></div>
Result:
http://example/script.php?a=87x112&t=B2B.BSDTrade&i=-723;000937090290
Related
I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I have freshly implemented masonry on my website(https://mypleaks.com) along bootstrap 5 and angular 13.
I have referred example from https://getbootstrap.com/docs/5.1/examples/masonry/ and added <script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
I have created cards dynamically like below :
<div class="container-lg content-container mt-lg-5 pr-lg-3 pl-lg-3 pt-lg-2 mt-3 p-0">
<div class="row" data-masonry='{"percentPosition": true }' style="position: relative; height: 1068px;">
<div class="col-sm-6 col-lg-4 mb-4" *ngFor="let content of contentList">
<div class="card" [class.remove-card-border]="content.contentType === advertisement">
<img *ngIf="content.attachments" [src]="content.attachments[0].identifier" class="card-img-top">
<div *ngIf="content.contentType != advertisement" class="card-body">
<h5 class="card-title">{{ content.title }}</h5>
<p class="card-text">{{ content.contentText }} <a [href]="content.externalUrl" class="text-nowrap" target="_blank">read more</a></p>
<div class="btn-toolbar d-flex justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3 input-group" role="group" aria-label="First group" ngbTooltip="good enough, people should know">
<button type="button" [disabled]="evaluationClicked" class="btn btn-success" placement="top"
(click)="upVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
<div class="input-group-prepend">
<div class="input-group-text">{{content.promoteCount}}</div>
</div>
</div>
<div class="btn-group ml-3 input-group" role="group" aria-label="Second group" ngbTooltip="fake or not good enough">
<div class="input-group-prepend">
<div class="input-group-text">{{content.rejectCount}}</div>
</div>
<button type="button" [disabled]="evaluationClicked" class="btn btn-danger" placement="top"
(click)="downVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-down fa-flip-horizontal" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div *ngIf="content.contentType === advertisement" class="d-flex justify-content-center">
<app-google-ads></app-google-ads>
</div>
</div>
</div>
</div>
</div>
Somehow, Style not updating on myPleaks similar to bootstrap example, Refer below snippets
bootstrap example
Thanks in advance for any help.
Instead using masonry-layout directly, I used ngx-masonry. Following are the package.json dependencies. And refer the documentation here
"masonry-layout": "^4.2.2",
"ngx-masonry": "^13.0.0"
Add following modules in app.module.ts
Wrap dynamic code in tag <ngx-masonry [options]="myOptions"> and add following config in the component implementation.
public myOptions: NgxMasonryOptions = {
gutter: 10};
I am developing an application with IONIC 4 for android and IOS.
I add a side menu (ion-menu), it works perfectly on android.
But in IOS it is giving me problems, the menu opens perfectly. But when I want to close the menu. Graphically the menu closes, but when I try to interact with the application, only the options within the side menu are activated.
Only the side menu items are useful, the rest of the application is canceled.
This is the process.
Main page normally:
I open the side menu:
I close the menu:
All this options gets blocked:
But this options still are activated, even though the menu has been hidden.
This only happen in IOS, my specifications:
My code:
<ion-menu side="start" content-id="main-content">
<ion-header class="headermenu">
<div class="spacioemenuleft">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
<img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;" src="{{pictureusuariomenu}}" >
</div> </div> </div>
</div>
<div class="spacioemenuright">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div class="textsaldo2" [innerHTML]="fullname"></div>
<div class="bloque">
<div style="float:left; width:70%; height:100%" class="textsaldo2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
PIN: {{pinusuario}}
</div> </div> </div>
</div>
<div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()">
<img alt="logo" style="width:100%; height:100%" src="assets/imgs/compartir-b.png" >
</div>
</div>
<span class="error ion-padding" style="color:white; font-weight:bold; margin-top:1em; padding-top:0em;" *ngIf="registrado">
PIN COPIADO!!!
</span>
</div>
</div>
</div>
</ion-header>
<ion-content >
<div class="ion-padding">
<div class="espacio2 margenboton" routerLink="/recargarsaldo">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
Recargar Saldo
</div> </div> </div>
</div>
<ion-list>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/perfil.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mi perfil
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/notificaciones">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11notificaciones.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Notificaciones
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/6dolares.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mis retiros
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11historial.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Historial
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/contact5.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Contáctanos
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;">
<img alt="logo" style="width:2.7vh; height:2.6vh;" src="assets/imgs/7cerrar.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;" (click)="cerrarsession();" >
Cerrar sesión
</div> </div> </div>
</div>
</ion-item>
</ion-list>
</div>
<div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;" >
<div style="float:left; width:40%; height:100%;" >
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:right;">
<p class="textblue2" style="font-weight:bold;">En alianza con:</p>
</div> </div> </div>
</div>
<div style="float:left; width:60%; height:100%; padding:0.1em; padding-top: 0.6em;" >
<img alt="logo" style="width:80%; height:auto" src="assets/imgs/Grupo517.png" >
</div>
</div> </div> </div>
</div>
</ion-content>
</ion-menu>
Any ideas?
<IonContent>
... other page components
{ authenticated ? <Menu/> : null }
</IonContent>
or what i have done in my example is not even render the router code that contains the menu when the user isn't authenticated
if (!authInfo || !authInfo.initialized) {
return (
<IonApp>
<IonLoading isOpen={true} />
</IonApp>
);
} else {
return (
<IonApp>
<>
{authInfo?.loggedIn === true ? (
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/:name" component={Page} exact />
<Route path="/tabs" component={TabRootPage} />
<Redirect from="/" to="/tabs" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
) : (
<IonReactRouter>
<Route
path="/create-account"
component={CreateAccountPage}
exact
/>
<Route path="/login" component={LoginPage} exact />
<Redirect from="/" to="/login" exact />
</IonReactRouter>
)}
</>
</IonApp>
);
}
See full app and source code here : https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter
Bootstrap navbar collapse is not working. The issue is that it shows a collapsing menu but on click, it is not collapsed.
I have provided my full code so that it can help you to suggest or help me to sort out the issue
<header class="head-image">
<nav id="nav-top" class="navbar hidden-xs hidden-sm" style="margin-bottom: 0px;">
<div class="container text-center">
<div class="col-md-4 col-md-offset-8">
<div class="search-box">
<?php echo do_shortcode('[smart_search id="1"]'); ?>
</div>
</div>
</div>
</nav>
<section id="main-header">
<div class="container">
<div class="pull-left">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
<img src="<?php header_image(); ?>" width="213" height="117" alt="">
</a>
</div>
<div class="pull-right hidden-xs hidden-sm">
<div class="row text-right">
<div class="col-xs-12">
<span class="text-white">Order hotline</span>
</div>
<div class="col-xs-12">
<span class="nav-phone">
<i class="fa fa-phone" aria-hidden="true"></i>
<a class="text-white nav-phone" href="tel:+"></a>
</span>
</div>
</div>
<div class="row n-m hidden-xs hidden-sm">
<div class="col-sm-6 col-xs-12 border-brown relative">
<div class="col-xs-3">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="col-xs-9">
<div class="row">
Login/Register </div>
<div class="row ">
<span class="text-white">
My Account
</span>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-12 border-brown relative">
<div class="col-xs-3">
<a href="<?php echo wc_get_cart_url(); ?>">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-9">
<div class="row">
Shopping bag
</div>
<div class="row">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class="price">(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar" id="main-menu">
<div class="container">
<div class="navbar-header hidden-md hidden-lg">
<div class="col-xs-6">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="text-white hidden-lg hidden-md" data-toggle="collapse" data-target="#main-menu-collapse">Menu</span>
</div>
<div class="col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative">
<div class="row">
<div class="col-xs-4">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</div>
<div class="col-xs-8 text-white">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items
<span class="text-white">
(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
<div id="main-menu-collapse" class="collapse navbar-collapse">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Contact
</div>
<div class="col-xs-9">
<a href="tel:">
<i class="fa fa-phone" aria-hidden="true"></i>
<span class="text-white"></span>
</a>
</div>
</div>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Login/ register
</div>
<div class="col-xs-9">
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="text-white">My account</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar" id="menu-shortcut">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav col-lg-12 text-center">
<li class="col-lg-4 col-md-4 text-left">text</li>
<li class="col-lg-4 col-md-4">text</li>
<li class="col-lg-4 col-md-4 text-right"><a class="toggle-modal" href="javascript:void(0);">Sign up </a></li>
</ul>
</div>
</div>
</nav>
</header>
I am also using Jquery the code is below, there is no jquery conflict in my code everything working perfectly only getting the issue when I am browsing form iPad
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button').click(function()
{
if($(this).children('button').attr('class') == "navbar-toggle collapsed")
{
$(this).parents('.container').children('#main-menu-collapse').addClass('in');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).children('button').html("");
$(this).children('button').css({
'min-width' : '44px',
'min-height' : '34px'
});
$(this).children('button').attr('aria-expanded', 'true');
$(this).children('button').removeClass('collapsed');
}else
{
$(this).children('button').addClass('collapsed');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).parents('.container').children('#main-menu-collapse').css('display', 'none');
$(this).children('button').attr('aria-expanded', 'false');
$(this).parents('.container').children('#main-menu-collapse').removeClass('in');
$(this).children('button').css({
"margin-top" : "11px",
'background' : 'none'
});
$(this).children('button').html('<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>');
}
});
.click() does not happen in Safari unless the element it is bound on is a legitimate click event receiver (target) in Apple's own implementation of web standard (which differs from current web standard).
The simplest way to make any element become a "legitimate" click event target is to add
cursor: pointer;
to it.
Other workarounds include using different events, such as touchstart, tap or input, depending on case.
So, in your case, a fix would be to add this to your CSS:
#main-menu .navbar-header .col-xs-6:first-child,
#main-menu .navbar-header button {
cursor: pointer;
}
Or to change the wrapper to:
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button')
.on('click touchstart', function(){
// your code here
})
In my opinion, you should remove wordpress, wordpress-theming and wp-nav-walker from the question as they are irrelevant to the bug and perhaps add safari, ios and/or ipad to it.
Can someone help why I cannot get text to wrap within a listview with ui-block but it works fine outside of the listview? Thanks. Code and screen shot attached.
<ul id="myDetList" data-role="listview" data-inset="true" style="word-wrap:break-word">
<li style="word-wrap:break-word">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold; word-wrap:break-word">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
</li>
</ul>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell why does it wrap here and not up there?</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
Screen Results in emulator
CSS:
#myDetList>.ui-li-static {
white-space: normal !important;
}
HTML:
<ul id="myDetList" data-role="listview" data-inset="true">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
</li>
</ul>